Text-shadow или box-shadow по кнопке

art13 · December 16, 2011

Хочу сделать изменение цвета тени по нажатию кнопки. Но никак не могу допереть. Может функцией? Объектной модели нет у этих стилей.

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<style type="text/css">
#hw {
position: absolute;
left: 120px;
top: 50px;
text-shadow: 2px 2px;
color: red;
font: 30px impact;
}
#but {
position: absolute;
left: 120px;
top: 100px;
}
</style>
</head>
<body>
	<div id="hw">Hello world</div>
	<div id="but">
	<table>
		<tr>
			<td>
			<input id="ct" type="text" size="7"/>
			</td>
			<td>
			<input id="cs" type="text" size="7"/>
			</td>
		</tr>
		<tr>
			<td>
			<input type="button" value="Цвет текста" name="t"
			onClick="document.getElementById('hw').style.color=document.getElementById('ct').value;"/>
			</td>
			<td>
			<input type="button" value="Цвет тени" name="s"
			onClick="document.getElementById('hw').style.text-shadow=document.getElementById('cs').value;"/>
			</td>
		</tr>
	</table>
	</div>
<script language="javascript" type="text/javascript">
/*function sc()
{

}*/
</script>
</body>
</html>

Odrin · December 16, 2011

document.getElementById('').style.textShadow = 'black 1px 1px 2px';

В чем проблема?

Вот только не знаю что делать, если такой стиль поддерживается браузером только хаками.

Можно например заранее создать нужные стили, а потом переключать их у самого элемента. Если вариантов цвета не много.

Edited December 16, 2011 by Odrin

Gaspode · December 16, 2011

Вешайте через скрипты класс, и в стилях этому классу задавайте тень. Проблем меньше.

art13 · December 18, 2011

Вешайте через скрипты класс, и в стилях этому классу задавайте тень. Проблем меньше.

Простите, а вешать через скрипты класс это как?

stars · December 18, 2011

Простите, а вешать через скрипты класс это как?


function hasClass(ele,cls) {
	return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function addClass(ele,cls) {
	if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}

function removeClass(ele,cls) {
	if (hasClass(ele,cls)) {
    	var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
		ele.className=ele.className.replace(reg,' ');
	}
}

//call the functions
addClass(document.getElementById("test"), "test");
removeClass(document.getElementById("test"), "test");

Edited December 18, 2011 by stars

art13 · December 18, 2011

Понял, спасибо. Вобщем просто функция и последующий ее вызов.

Sign In

Text-shadow или box-shadow по кнопке

Question

art13

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Odrin

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

art13

Link to comment

Share on other sites

stars

Link to comment

Share on other sites

art13

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information