javascritp オペレーション 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代码会变为

style 属性で変更された CSS は、CSS スタイル シート内のスタイルを変更するのではなく、HTML コードにインラインで書き込まれるだけです。ただし、インライン CSS は優先度が高いため、スタイル シート内の CSS が上書きされます。

cssを設定する場合はstyleを使用した方が良いです。しかし、CSS プロパティ値を読み取る場合はどうなるでしょうか?私たちは通常、外部スタイルシートにスタイルを記述しますが、このように CSS 属性値を読み取るにはどうすればよいでしょうか。これがこの投稿の主な内容です。

1.inlineStyle [要素のスタイル属性]
ie または ff のどちらでも、要素には Css2Properties 型のスタイル属性があり、これらの値はクエリまたは変更できることに注意してください。スタイル クエリを通じて取得された値はすべて文字列の形式で返されます。設定では文字列にのみ設定でき、値には対応する単位を含める必要があります。 = parseInt(e.style.marginLeft) +parseInt(e.style.marginRight);

ノードは

<script> を理解します <p class="sougouAnswer"> // スタイル シート要素 s2 を削除します <br> var s2=document.getElementById("s2") ; <br> s2.parentNode.removeChild(s2); <br> </script>
element.style.margin = topMargin + ”px” + rigntMargin + “px” +bottomMargin + “px”

; element.style.margin = topMargin + ”px” + rigntMargin + “px” +bottomMargin + “px” + leftMargin + “px”;

varpadding_left = 50; //単位を追加することを忘れないでください

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

Javascript テーブルを並べ替えます

テスト

<スクリプト>
var target = document.getElementById("test");
document.onclick = function(){
test.style.display = "none";
};
target.onclick = function(){
if(document.all){
window.event.cancelBubble = true;
}else{
event.stopPropagation(); 
}
}