как через JS поменять св-ва CSS класса?

elfuvo · November 24, 2007

как через JS поменять св-ва цсс класса.

Например: .s{width:100px} to .s{width:20px}:|

Emm · November 24, 2007

http://htmlbook.ru/css/width.html - в самом низу страницы глянь.

U2D · November 24, 2007

document.getElementById(id).style.width = "200px";

У меня похожий вопрос. Есть файл css где написаны классы, в даном случае к дивам (div.class1), есть файл js, в котором есть функция, принимающая id элемента и выводящая на экран его style.width, выводит пустой алерт.

в хтмл файле сначала подключаю css, в ч?м может быть проблема ..

elfuvo · November 24, 2007

я хочу не получать обьект и менять его св-ва, а менять параметры самого CSS класса, т.е. обьект может находится в любом блоке, их может быть много, но class у них один.

elfuvo · November 27, 2007

to U2D

я думаю проблема в том, что ты сначала проверяешь, а потом присваиваешь длину.

попробуй скрипт вставить после элемента Div или задержи его выполнение.

Yarik Voronov · November 27, 2007

я хочу не получать обьект и менять его св-ва, а менять параметры самого CSS класса, т.е. обьект может находится в любом блоке, их может быть много, но class у них один.

elfuvo, и было вначале два варианта:

1. разобрать все стили страницы в объект типа

{
   selectorA : [styleSheetIndex, cssRulesIndex],
   selectorB : [styleSheetIndex, cssRulesIndex],
   selectorN : [styleSheetIndex, cssRulesIndex]
}

потом среди них найти нужный селектор, по его индексу среди cssRules изменить / записать нужные свойства и(или) их значения. Но, подумав, нашел несколько недостатков, во-первых, styleSheet обычно более одного, во-вторых, селекторы могут иметь одинаковые имена и разные свойства, но соответственно разные cssRulesIndex, в-третьих, много времени уйдет сначало на разбор, потом на поиск, да и над самим кодом тоже придется повозиться. Потому реализовал второй вариант

2. в конец последнего листа CSS правил довавить последним нужный селектор с заданными свойствами:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Work with CSS Rules</title>
<style type="text/css" id="documentRule">
	.new {
		border-bottom:#3300FF 10px solid;
	}

	DIV {
		background-color:#CBCBCB;
		border:solid 2px #3300FF;
		color:#FF0000;
		width:350px;
		height:100px;
		margin:15px;
		padding:5px;
	}
</style>
</head>

<body>
	<script language="javascript" type="text/javascript">

		function getStyle(aObj) {
			var sObj= document.styleSheets[document.styleSheets.length-1],
				sObjRules= sObj.cssRules ? sObj.cssRules : sObj.rules,
				e= sObjRules.length-1,
				myRuleA= {}, myRuleB= {}, curentRule= {};

				myRuleA['head']= '.new';
				myRuleA['body']= 'background-color:#FFFF66;';
				myRuleB['head']= '.new';
				myRuleB['body']= 'background-color:#990000;';

				var editRulesDOM= function () {
					if (sObjRules[e].cssText.match(/^.news{/)) sObj.deleteRule(e); else e++;
					sObj.insertRule(curentRule['head']+' {'+curentRule['body']+'}',e);
				}
				var editRulesIE= function () {
					if (sObjRules[e].selectorText.match(/^.new/)) sObj.removeRule(e); else e++;
					sObj.addRule(curentRule['head'],curentRule['body'],e);
				}

				if (aObj.className=='A') {
					aObj.className= 'B'; curentRule= myRuleA;
				}else{
					aObj.className= 'A'; curentRule= myRuleB;
				}

				if (sObj.cssRules) editRulesDOM(); else editRulesIE();
		}
	</script>

	<a href="#" onClick="getStyle(this); return false;" class="A">Check It</a>
	<div id="myDiv" class="new"> </div>
	<div id="styleVal" class="new"> </div>
</body>
</html>

протестировано IE6SP1, FF2.0.0.8, Opera 9.24

elfuvo · November 28, 2007

большое спасибо!!! наверно не один день работал?

Yarik Voronov · November 29, 2007

[offtopic]

наверно не один день работал?

часов 5 наверно. просто тема для меня новая, пришлось повозиться с разными вариациями (алгоритмами)

З.Ы. Хорошая матчасть (мануал) очень повышает скорость работы. У меня O'Relly http://hell.org.ua/Docs/oreilly/

[/offtopic]

Sign In

как через JS поменять св-ва CSS класса?

Question

elfuvo

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Emm

Link to comment

Share on other sites

U2D

Link to comment

Share on other sites

elfuvo

Link to comment

Share on other sites

elfuvo

Link to comment

Share on other sites

Yarik Voronov

Link to comment

Share on other sites

elfuvo

Link to comment

Share on other sites

Yarik Voronov

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information