|
Пред.
1 - 15
16 - 25 |
healer
Администратор
Из: Москва
Сообщения: 24467
|
 |
Динамическое управление стилями |
|
Послано: 17-07-2015 15:12 |
|
|
Можно поизвращаться и сделать цвет случайным
var rcolor='rgb('+Math.floor(Math.random() * 255)+','+Math.floor(Math.random() * 255)+','+Math.floor(Math.random() * 255)+')';
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Динамическое управление стилями |
|
Послано: 24-07-2015 07:09 |
|
|
Еще один пример того, как можно добавить элемент в таблицу стилей
function addStylesheet(styles) {
// Сначала необходимо создать новую таблицу стилей
var styleElt, styleSheet;
if (document.createStyleSheet) { //Если определен IE API, использовать его
styleSheet = document.createStyleSheet();
}
else {
var head = document.getElementsByTagName("head")[0];
styleElt = document.createElement("style"); // Новый элемент <style>
head.appendChild(styleElt); // Вставить в <head>
// Теперь новая таблица находится в конце массива
styleSheet = document.styleSheets[document.styleSheets.length-1];
}
// Вставить стили в таблицу
if (typeof styles === "string") {
// Аргумент содержит текстовое определение таблицы стилей
if (styleElt)
styleElt.innerHTML = styles;
else styleSheet.cssText = styles; // IE API
}
}
Пример вызова
addStylesheet(".ins {color:red;} ");
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Динамическое управление стилями |
|
Послано: 25-08-2015 06:49 |
|
|
Еще примеры использования addRule and insertRule методов.
<head>
<style id="ownSyle">
</style>
<script type="text/javascript">
function addStyleRule () {
var styleTag = document.getElementById ("ownSyle");
// the empty style sheet
var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
if (sheet.insertRule) { // all browsers, except IE before version 9
sheet.insertRule ("button {color:red}", 0);
}
else { // Internet Explorer before version 9
if (sheet.addRule) {
sheet.addRule ("button", "color:red", 0);
}
}
}
</script>
</head>
<body>
<button onclick="addStyleRule ();">Click to modify my text color!</button>
</body>
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Динамическое управление стилями |
|
Послано: 25-08-2015 07:00 |
|
|
В следующем примере создается новая таблица стилей и в нее вносится запись нового стиля
<head>
<script type="text/javascript">
function CreateStyleRule () {
// create a new style sheet
var styleTag = document.createElement ("style");
var head = document.getElementsByTagName ("head")[0];
head.appendChild (styleTag);
var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
// add a new rule to the style sheet
if (sheet.insertRule) {
sheet.insertRule ("body {background:red;}", 0);
}
else {
sheet.addRule ("body", "background:red", 0);
}
}
</script>
</head>
<body>
<button onclick="CreateStyleRule ();">Create a new style rule!</button>
</body>
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Динамическое управление стилями |
|
Послано: 28-08-2015 10:15 |
|
|
В следующем примере изменяя CSS мы добиваемся эффекта анимации
function fadeIn(e, time) {
if (typeof e === "string") e = document.getElementByld(e);
if (!time) time = 500;
var start = (new Date()).getTime(); // Запомнить момент начала анимации
animate(); // И запустить анимацию
function animate() {
var elapsed = (new Date()).getTime()-start; // Прошедшее время
var fraction = elapsed/time; // Доля от общего времени
if (fraction < 1) { // Если не пора завершать
e.style.opacity = String(fraction); // Установить ее в e
setTimeout(animate, Math.min(25, time-elapsed));
}
else { // Иначе завершить
e.style.opacity = "1"; // Сделать e полностью непрозрачным
}
}
}
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Динамическое управление стилями |
|
Послано: 28-08-2015 10:21 |
|
|
Изменив всего несколько строчек можно создать "обратную" функцию - fadeOut.
function fadeOut(e, time) {
if (typeof e === "string") e = document.getElementByld(e);
if (!time) time = 500;
var start = (new Date()).getTime(); // Запомнить момент начала анимации
animate(); // И запустить анимацию
function animate() {
var elapsed = (new Date()).getTime()-start; // Прошедшее время
var fraction = elapsed/time; // Доля от общего времени
if (fraction < 1) { // Если не пора завершать
e.style.opacity = String(1-fraction); // Установить ее в e
setTimeout(animate, Math.min(25, time-elapsed));
}
else { // Иначе завершить
e.style.opacity = "0"; // Сделать e полностью прозрачным
}
}
}
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Динамическое управление стилями |
|
Послано: 28-08-2015 11:16 |
|
|
Такие или аналогичные функции фунции обычно подключают к событиям onclick, onmouseover, onmouseout
Например,
<button onmouseover="fadeOut(this,700)" onmouseout="fadeIn(this,700)">Щелкните меня!</button>
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Динамическое управление стилями |
|
Послано: 28-08-2015 11:21 |
|
|
Динамически меняя смещение объекта можнно добиться эффекта анимации - движение.
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Динамическое управление стилями |
|
Послано: 11-09-2015 13:09 |
|
|
<div id="dialogWindow">
А сейчас рассмотрим свойство clip,
изменение которого и дает нужный нам эффект сворачивания/разворачивания.
Данное свойство определяет, так называемую, область усечения.
</div>
<script type="text/javascript">
var curtainStep = 3; //шаг - количество пикселей на которое будет сворачивать слой за один раз
var curtainTimeout = 15;//задержка перед последующей итерацией для эффекта плавности
//текущее количество обрезаемых пикселей слоя слева и справа
var curtainLeft = 150;
var curtainRight = 150;
var curtainWidth = 300;//ширина слоя
//ф-ция разворачивания слоя
function curtainOpen()
{
if (curtainLeft > 0)//Пока левая граница области усечения не достигла левой границы слоя
{
curtainRight += curtainStep; //раскрываем область усечения справа на curtainStep пикселей
curtainLeft -= curtainStep; //раскрываем область усечения слева на curtainStep пикселей
var rect = 'rect(auto, '+ curtainRight +'px, auto, '+ curtainLeft +'px)';
document.getElementById("dialogWindow").style.clip = rect;
setTimeout(curtainOpen,curtainTimeout); //вызываем эту же функцию повторно через curtainTimeout миллисекунд
}
}
//ф-ция сворачивания слоя
function curtainClose()
{
if (curtainLeft<curtainRight)//Пока левая граница области усечения не встретилась с правой
{
curtainRight -= curtainStep; //сужаем область усечения справа на curtainStep пикселей
curtainLeft += curtainStep; //сужаем область усечения слева на curtainStep пикселей
var rect = 'rect(auto, '+ curtainRight +'px, auto, '+ curtainLeft +'px)';
document.getElementById("dialogWindow").style.clip = rect;
setTimeout(curtainClose,curtainTimeout); //вызываем эту же функцию повторно через curtainTimeout миллисекунд
}
}
curtainOpen();
setTimeout(curtainClose,5000);
</script>
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24467
|
|
Динамическое управление стилями CSS |
|
Послано: 08-01-2021 22:31 |
|
|
Есть div с классом mystyle. В классе есть свойство margin как его изменить с помощью обычного js
document.getElementsByClassName('mystyle')[0].style.margin = "50px";
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
|
Пред.
1 - 15
16 - 25 |
