Home > Article > Web Front-end > javascritp 操作 css_html/css_WEB-ITnose
javascritp 操作 css_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:22:51964browse
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。比如：
<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[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 理解
<script> <br /> //删除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”;//不要忘记加单位
var topMargin = 10,rigntMargin = 11,bottomMargin = 12,leftMargin = 13;
element.style.margin = topMargin + ”px” + rigntMargin + “px” + bottomMargin + “px” + leftMargin + “px”;
Javascript 对表格排序
<script> <br /> <br /> /************************************************************************** <br /> 排序的主方法，有三个形参，STableTd,iCol,sDataType分别为需要排序的表格ID， <br /> 需要排序的表格列号，所在列的数据类型（支持int,float,date,string四种数据类型) <br /> **************************************************************************/ <br /> <br /> function sortTable(sTableId,iCol,sDataType){ <br /> var oTable = document.getElementById(sTableId);//获取表格的ID <br /> <br /> var oTbody = oTable.tBodies[0]; //获取表格的tbody <br /> <br /> var colDataRows = oTbody.rows; //获取tbody里的所有行的引用 <br /> <br /> var aTRs = new Array; //定义aTRs数组用于存放tbody里的行 <br /> <br /> for(var i=0;i<colDataRows.length;i++){//依次把所有行放如aTRs数组/ <br /> aTRs.push(colDataRows[i]); <br /> } <br /> <br /> /*********************************************************************** <br /> sortCol属性是额外给table添加的属性，用于作顺反两种顺序排序时的判断，区分 <br /> 首次排序和后面的有序反转 <br /> ************************************************************************/ <br /> if(oTable.sortCol == iCol){//非首次排序 <br /> aTRs.reverse(); <br /> }else{ //首次排序 <br /> aTRs.sort(generateCompareTRs(iCol,sDataType)); <br /> } <br /> var oFragment=document.createDocumentFragment();//创建文档碎片/ <br /> for(var i = 0;i < aTRs.length; i++){ //把排序过的aTRs数组成员依次添加到文档碎片 <br /> oFragment.appendChild(aTRs[i]); <br /> } <br /> oTbody.appendChild(oFragment); //把文档碎片添加到tbody,完成排序后的显示更新 <br /> oTable.sortCol=iCol;//把当前列号赋值给sortCol,以此来区分首次排序和非首次排序,//sortCol的默认值为-1 <br /> <br /> }; <br /> <br /> //比较函数，用于两项之间的排序 <br /> function generateCompareTRs(iCol,sDataType){ <br /> return function compareTRs(oTR1,oTR2){ <br /> <br /> var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType); <br /> var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType); <br /> if(vValue1<vValue2){ <br /> return -1; <br /> }else if(vValue1>vValue2){ <br /> return 1; <br /> }else{ <br /> return 0; <br /> } <br /> }; <br /> }; <br /> //数据类型转换函数 <br /> function convert(sValue,sDataType){ <br /> <br /> sValue = normalizeString(sValue); <br /> <br /> switch(sDataType){ <br /> case "int":return parseInt(sValue); <br /> case "float": return parseFloat(sValue); <br /> case "date":return new Date(Date.parse(sValue)); <br /> default:return sValue.toString(); <br /> } <br /> }; <br /> <br /> //将空的列转换成空格 <br /> // Regular expressions for normalizing white space. <br /> var whtSpEnds = new RegExp("^\\s*|\\s*$", "g"); <br /> var whtSpMult = new RegExp("\\s\\s+", "g"); <br /> <br /> function normalizeString(s) { <br /> <br /> s = s.replace(whtSpMult, " "); // Collapse any multiple whites space. <br /> s = s.replace(whtSpEnds, ""); // Remove leading or trailing white space. <br /> <br /> return s; <br /> } <br /> <br /> </script>
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">
<script> <br /> </script>
<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>