变动一个标签的 class 属性的代码是:

document.getElementById( id ).className = 字符串;

document.getElementById( id ) 用于获取标签对应的 DOM 工具,你也可以用其它方法获取。
className 是 DOM 工具的一个属性,它对应于标签的 class 属性。
字符串 是 class 属性的新值,它该当是一个已定义的CSS选择符。

htmljs替换整个页面JS|JS动态修正网页文件的CSS CSS

利用这种办法可以把标签的CSS样式表更换成其余一个,也可以让一个没有运用CSS样式的标签运用指定的样式。

举例1,代码如下:

<style type=\"大众text/css\公众>

.txt {

font-size: 30px; font-weight: bold; color: red; }

</style>

<div id=\"大众tt\"大众>欢迎光临!
</div>

<p><button on click=\公众setClass()\公众>变动样式</button></p>

<script type=\"大众text/javas cript\"大众>

function setClass()

{

document.getElementById( \"大众tt\"大众 ).className = \"大众txt\"大众;

}

</script>

举例2,代码如下:

<script type=\公众text/javascript\公众>

<!--

var h=document.getElementById(\公众tab\"大众).getElementsByTagName(\公众h3\公众);

var d=document.getElementById(\"大众tab\"大众).getElementsByTagName(\"大众div\"大众);

function go_to(ao){

for(var i=0;i<h.length;i++){

if(ao-1==i){

h[i].className+=\"大众 up\公众;

d[i].className+=\"大众 block\公众;

}

else {

h[i].className=\"大众 \"大众;

d[i].className=\公众 \"大众;

}

}

}

//-->

</script>

2 用JS修正标签的 style 属性值:

元素的style属性可以直接设置元素的外不雅观属性。
Style 工具的属性和 CSS 属性是逐一对应的,可以直接设置,也可以通过JS动态变动。

变动一个标签的 style 属性的代码是:

document.getElementById( id ).style.属性名 = 值;

document.getElementById( id ) 用于获取标签对应的 DOM 工具,你也可以用其它方法获取。
style 是 DOM 工具的一个属性,它本身也是一个工具。
属性名 是 Style 工具的属性名,它和某个CSS属性是相对应的。

解释:这种方法修正的单一的一个CSS属性,它不影响标签上其它CSS属性值。

举例,代码如下:

div id=\"大众t2\"大众>欢迎光临!
</div>

<p><button on click=\公众setSize()\"大众>大小</button>

<button on click=\"大众setColor()\公众>颜色</button>

<button on click=\"大众setbgColor()\公众>背景</button>

<button on click=\"大众setBd()\公众>边框</button>

</p>

<script type=\公众text/java script\"大众>

function setSize()

{

document.getElementById( \公众t2\公众 ).style.fontSize = \"大众30px\"大众;

}

function setColor()

{

document.getElementById( \"大众t2\"大众 ).style.color = \"大众red\"大众;

}

function setbgColor()

{

document.getElementById( \"大众t2\公众 ).style.backgroundColor = \公众blue\公众;

}

function setBd()

{

document.getElementById( \公众t2\"大众 ).style.border = \"大众3px solid #FA8072\"大众;

}

</script>

3 综合实例

function clk(event) {

var parent = document.getElementById(\"大众parent\"大众);

//改变className

var child0 = document.createElement(\公众div\"大众);

child0.innerHTML = \公众child0\公众;

child0.className = \公众newDiv\公众;

parent.appendChild(child0);

//改变cssText

var child1 = document.createElement(\"大众div\"大众);

child1.innerHTML = \"大众child1\"大众;

child1.style.cssText = \"大众color:red;\"大众;

parent.appendChild(child1);

//改变直接样式

var child2 = document.createElement(\"大众div\公众);

child2.innerHTML = \"大众child2\"大众;

child2.style.fontSize = \公众28px\"大众;

parent.appendChild(child2);

}

4 JS设置CSS的语法与CSS语法的差异盒子标签和属性对照CSS语法(不区分大小写)JavaScript语法(区分大小写)borderborderborder-bottomborderBottomborder-bottom-colorborderBottomColorborder-bottom-styleborderBottomStyleborder-bottom-widthborderBottomWidthborder-colorborderColorborder-leftborderLeftborder-left-colorborderLeftColorborder-left-styleborderLeftStyleborder-left-widthborderLeftWidthborder-rightborderRightborder-right-colorborderRightColorborder-right-styleborderRightStyleborder-right-widthborderRightWidthborder-styleborderStyleborder-topborderTopborder-top-colorborderTopColorborder-top-styleborderTopStyleborder-top-widthborderTopWidthborder-widthborderWidthclearclearfloatfloatStylemarginmarginmargin-bottommarginBottommargin-leftmarginLeftmargin-rightmarginRightmargin-topmarginToppaddingpaddingpadding-bottompaddingBottompadding-leftpaddingLeftpadding-rightpaddingRightpadding-toppaddingTop颜色和背景标签和属性对照CSS 语法(不区分大小写)JavaScript 语法(区分大小写)backgroundbackgroundbackground-attachmentbackgroundAttachmentbackground-colorbackgroundColorbackground-imagebackgroundImagebackground-positionbackgroundPositionbackground-repeatbackgroundRepeatcolorcolor样式标签和属性对照CSS语法(不区分大小写)JavaScript 语法(区分大小写)displaydisplaylist-style-typelistStyleTypelist-style-imagelistStyleImagelist-style-positionlistStylePositionlist-stylelistStylewhite-spacewhiteSpace笔墨样式标签和属性对照CSS 语法(不区分大小写)JavaScript 语法(区分大小写)fontfontfont-familyfontFamilyfont-sizefontSizefont-stylefontStylefont-variantfontVariantfont-weightfontWeight文本标签和属性对照CSS 语法(不区分大小写)JavaScript 语法(区分大小写)letter-spacingletterSpacingline-breaklineBreakline-heightlineHeighttext-aligntextAligntext-decorationtextDecorationtext-indenttextIndenttext-justifytextJustifytext-transformtextTransformvertical-align

verticalAlign

从上表可以看出,两者的写法差异在于CSS是不区分大小写的,以是两个英笔墨中间用了一个横杠\"大众-\"大众,用JS区分大小写,以是不用横杠\"大众-\"大众,而用英文的小驼峰式命名法(lower camel case,第一个单字以小写字母开始,第二个单字的首字母大写)。

-End-