javascriptp operation css_html/css_WEB-ITnose

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. 属性名。

JS获取CSS属性值

 不能访问class。
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。比如：

<script> <br> alert(document.getElementById('inline').style.width); <br> //上面语句显示 "50px"  <br> alert(document.getElementById('out').style.width); <br> //上面语句弹出空白，没有读取到<style>标签里面的css样式 <br> </script>
如果js里面添加语句 
document.getElementById('out').style.width = 100 + "px"; 
则id="out"的div元素的HTML代码会变为

The css modified with the style attribute does not modify the style in the css style sheet, but is written inline into the html code. However, because the inline CSS has a high priority, it will overwrite the CSS in the style sheet.

If you set css, it is better to use style. But what if you read the css property value? We usually write styles in external style sheets. How do we read css attribute values ​​in this way? This is what this post is mainly about.

1.inlineStyle [element’s style attribute]
Whether in ie or ff, element has a style attribute of type Css2Properties, whose attributes correspond to the style attributes in html. These values ​​​​can The query can also be modified. Note that the values ​​obtained through the style query are all returned in the form of strings. They can only be set to strings in settings, and the corresponding units must be included for the values.
e.style. left = "300px";
var totalMarginWidth = parseInt(e.style.marginLeft) parseInt(e.style.marginRight);

Node understands
<script> <br> //Delete The style sheet element s2 <br> var s2=document.getElementById("s2"); <br> s2.parentNode.removeChild(s2); <br> </script>

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”;//Don’t forget to add units

var topMargin = 10,rigntMargin = 11,bottomMargin = 12,leftMargin = 13;
element.style.margin = topMargin ”px” rigntMargin ”px” bottomMargin ”px” leftMargin ”px”;

Javascript Sort Table







body>

Birthday
Silbings
















































































































 

Last Name	First Name
Simth	John	7/12/1978	2
Johnson	Betty	5/12/1965	5
Henderson	Nathan	10/15/1977	3
Willianms	James	2/25/1949	1
Gilliam	Michael	7/8/1980	4
Walker	Matthew	6/18/1981	3
Willianms	James	2/25/1949	1
Gilliam	Michael	7/8/1980	4
Walker	Matthew	6/18/1981	3
Willianms	James	2/25/1949	1
Gilliam	Michael	7/8/1980	4
Walker	Matthew	6/18/1981	3
李名	James	2/25/1949	1
Gilliam		7/8/1980	4
Walker	Matthew	6/18/1981	3
Willianms	James	2/25/1949	1
Gilliam	Michael	7/8/1980	4
Walker	Matthew	6/18/1981	3

function click_a(divDisplay)
        {
            if(document.getElementById(divDisplay).style.display != "block")
            {
                document.getElementById(divDisplay).style.display = "block";
            }
            else
            {
                document.getElementById(divDisplay).style.display = "none";
            }
        }

<script> <br> </script>


test

<script> <br> var target = document.getElementById("test"); <br> document.onclick = function(){ <br> test.style.display = "none"; <br> }; <br> target.onclick = function(){ <br> if(document.all){ <br> window.event.cancelBubble = true; <br>   }else{ <br> event.stopPropagation();  <br> } <br> } <br> </script>