CSS
Javascript动态操作CSS总结http://sweetpoem.iteye.com/blog/1099825
一、使用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等
3、js操作css float属性的特殊写法
因为 float 是javascript的保留字,我们不能直接使用obj.style.float来使用,这样操作是无效的。其正确的使用方法是为:IE:obj.style.styleFloat,其他浏览器Mozilla(gecko),ff等用 styleFloat:obj.style.cssFloat。
二、使用js获取css属性值
1、获取行内Style:obj.style. 属性名。
2、获取Class内及Link外部的Css属性:IE中使用的是obj.currentStyle[“属性名”]方法,而FF是用的是getComputedStyle 方法
三、使用js给css属性赋值
1、赋值class属性
赋值:document.getElementById('ceil').className = "class1";
如它有多个值:document.getElementById('ceil').className = "class1 class2 class3";
2、obj.style.cssText设定一个对象的css样式
document.getElementById('navition').style.cssText = "您的CSS代码';
还有其他的总结吗?
回复讨论(解决方案)
这次说说javascript。前端三大代码,html、css、javascript(jquery)。我还是想说下css方面的。所以就写个javascript操作css的帖子。javascript也是前端最重要的功能语言,不懂这个真没法混啊~
以前javascript作为脚本语言的时候,主要功能就是操作dom,很多就是操作元素的样式。
大家最熟悉应该就是style属性了。
比如:obj.style.display = "none";
就可以把obj元素隐藏。但是这个style是把代码以内联的形式写进html里面的。读取属性的时候也只能读取内联形式的css。比如:
如果js里面添加语句
document.getElementById('out').style.width = 100 + "px";
则id="out"的div元素的HTML代码会变为
用style属性修改的css并没有修改css样式表里面的样式,只是以内联形式写进了html代码里面。但是由于内联的css优先级高,会覆盖css样式表里面的。
如果设置css的话,用style还是比较好的。但是如果读取css属性值呢?我们一般是把样式写在外部样式表,这样子怎么读取css属性值呢。这就是这个帖子主要讲的地方。
1.inlineStyle[element的style属性]
无论是在ie还是ff中,element都有一个类型为Css2Properties的style属性,其属性对应着html中的style属性.这些值可以查询也可以被修改.注意通过的style查询得到的值都是以字符串的形式返回,在设置也只能设置为字符串,对于数值还必须带上相应的单位.
e.style.left = "300px";
var totalMarginWidth = parseInt(e.style.marginLeft) +parseInt(e.style.marginRight);
Node 理解
element.style.margin = topMargin + ”px” + rigntMargin + “px” + bottomMargin + “px” + leftMargin + “px”;
element.style.margin = topMargin + ”px” + rigntMargin + “px” + bottomMargin + “px” + leftMargin + “px”;
var padding_left = 50;
element.style.left = padding_left + “px”;//不要忘记加单位
var topMargin = 10,rigntMargin = 11,bottomMargin = 12,leftMargin = 13;
element.style.margin = topMargin + ”px” + rigntMargin + “px” + bottomMargin + “px” + leftMargin + “px”;
Javascript 对表格排序
function click_a(divDisplay)
{
if(document.getElementById(divDisplay).style.display != "block")
{
document.getElementById(divDisplay).style.display = "block";
}
else
{
document.getElementById(divDisplay).style.display = "none";
}
}
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">










