日期:2014-05-16  浏览次数:20345 次

JS学习笔记之style属性

在JS编程时,经常要遇到用JS操作CSS属性的情况,有时候,经常会感觉我明明设置了,但是不起作用,很有可能就是属性名字写错了,其实使用js操作css属性的写法是有一定的规律的:

1、对于没有中划线的css属性一般直接使用style.属性名即可。
如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等。

2、对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。
如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamily等。

这个规律我想大多数的前端开发者也都熟知。

但在css中有一个特殊的属性其js使用方法比较特殊。
这个特殊的属性就是:float。我们不能直接使用obj.style.float来使用,这样操作是无效的。

其正确的使用方法是为:

IE:obj.style.styleFloat,

其他浏览器:obj.style.cssFloat。

?

?

以前有个同学问,

现在我需要对这个标签赋值,其内容为:
1、需要显示的字为“HELLO WORLD”;
2、span的 background-color : red ,另外还要:border:1px solid #333333;cursor:hand;
我需要在<script></script>内把他们赋值,请问怎么写呢?难道要:
document.getElementById("a").style.background="red"; 来一项一项的写?
能不能一下子把style写完啊,怎么写啊?
解决办法:
1、先定义一个CSS规则,然后this.className=" "
2、document.getElementById("a").style.cssText="border-collapse:collapse;border-spacing:1;border:1 solid #0B2565;background-color:white;color:black;"

?