//使用domObj.style来设置css:
domObj.style.backgroundColor="#000"//对应style里 background-color
domObj.style.fontSize="#000"//对应style里 font-size
//如果对这个表不太清楚可以在w3c上查一下
//但是一般有个规律就是,首单词小写 “-”后面的第一个字母大写,如:font-size 就是fontSize
如果是想更换标签的class的话,可以使用
domObj.className = "other_class"1、直接更改,比如:
xID.style.display = "block" // 更改display属性,会覆盖css中的定义。xID.style.display = "" // 取消js更改display属性,以css样式为准。
这里的xID,是通过id获取的标签。当然,也可能是通过tagName之类的获取的标签。
这种方式,简单直接。但是要修改大量的样式的时候,不适合。所以,我更推荐第二种方式。
2、更改类名
xID.className = "xx yy"如果有多个类,就用空格隔开。前提,在样式中要有已有类的定义。比如这里的xx和yy类,在css中应该是写好的。
这种方式把所有的样式写在了css文件中,适合更改较多的样式以及炫酷的样式。js就只做一件事情:改类。至于这个类会把标签变成什么样子,交给css吧。
通过jquery也可以达到如上的效果:
$("#xID").css({fontSize:"12px",
display:"block"
}) // 直接更改样式
$("#xID").addClass("xx") // 增加删除类
$("#xID").removeClass("xx")
如果网页中一个id为“no”的标签,暂且当div标签来tell;
想要在js中设置这个div的css样式,很一般的做法是:
var
obj
=
document.getElementByIdx_x_x('no')
obj.style.width
=
'400px'
obj.style.height
=
'300px'
如果要设置一堆又一堆的css样式呢,太麻烦了把、
一般情况下都会结合css来添加className或者改变className达到想要的效果,但是如果你create一个元素,难道还想这样简单点?那就要想别的办法了~
于是大家就写了一个又一个的函数,经典的两个是:
var
obj
=
document.getElementByIdx_x_x('no')
function
setStyle(obj,
css)
{
for(var
attr
in
obj){
obj.style[attr]
=
css[attr]
}
}
setStyle(obj,{width:"400px",height:"300px"})
当然还有更简单的,cssText:
var
obj
=
document.getElementByIdx_x_x('no')
obj.style.cssText
=
"width:400px
height:300px"
当然这种方法对于create的元素初始化css样式来说很简单很方便。
以上就是小编为大家带来的js中用cssText设置css样式的简单方法的全部内容了,希望对大家有所帮助,多多支持脚本之家~