Форум

cronopio · #1 (**permalink**) 24.05.2009, 22:11

Здравствуйте! Есть такой код

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function setColor()
{
    document.getElementById("p1").style.color="#ff0000";
    setTimeout(function(){document.getElementById("p1").style.cssText='opacity:50'},500);
}
</script>
</head>
<body>

<p id="p1">This is an example paragraph</p>

<input type="button" onclick="setColor()"
value="Change color of text" />

</body>
</html>

За гранью моего понимания — почему как только меняю прозрачность, цвет текста вновь становится по умолчанию, или цвета прописанного в цсс — что я упустила? Помогите советом плиз

Octane · #2 (**permalink**) 24.05.2009, 22:54

Потому что ты весь cssText перезписываешь.

document.getElementById("p1").style.opacity = "0.5"

CSS-свойство opacity может иметь значения от 0.0 до 1.0.
А для IE прозрачность устанавливается фильтром:

document.getElementById("p1").style.filter = "alpha(opacity=50)"

Тут уже значения от 0 до 100.

cronopio · #3 (**permalink**) 24.05.2009, 23:19

Век живи- век учись ) Пасиб - работает! Чтоб не делить на браузеры скрипт вот так сделала

document.getElementById("p1").style.cssText += 'opacity:50'; //плюс вариант для ИЕ и пр.

А про IE - знаю - для кратости убрала из кода.

x-yuri · #4 (**permalink**) 25.05.2009, 01:16

document.getElementById("p1").style.cssText += 'opacity:50'; //плюс вариант для ИЕ и пр.

это непонятно для кого вариант

я бы скорее сделал так:

setTimeout(function(){
    document.getElementById("p1").style.opacity = "0.5";
    document.getElementById("p1").style.filter = "alpha(opacity=50)";
}, 500);

cssText редко используется

cronopio · #5 (**permalink**) 25.05.2009, 12:28

opacity:0.5 канешн - опечаталась. для ИЕ

document.getElementById('p1').style.filter = 'alpha(opacity=50)';

вроде все правильно, только не хочет он это кушать

(ИЕ6 у меня)

Octane · #6 (**permalink**) 25.05.2009, 14:09

Чтобы фильтры заработали в IE для этого же элемента нужно включить hasLayout. Самый простой способ - установить ширину или высоту элемента. Если так нельзя сделать, то добавьте CSS-свойство zoom:1; только проверьте все ли хорошо в Safari, последние версии стали поддерживать это свойство.

cronopio · #7 (**permalink**) 25.05.2009, 20:45

Вот уж поистине коварство ослика не имеет границ - я б долго мучилась. Спасибо - все работает теперь.

Форум

Справочник

Discord чат

Курсы javascript