js访问html样式,js读取外部css文件的属性

先举一个例子：我们经常会遇到这样一个问题，设置所有table的td宽度而不设置table的总宽度后，显示出来的table的总宽度并不是所有td的宽度之和。而且各td的宽度也并不是原先设定的宽度。但是在随时都有可能增加td的情况下，我们又不能随时手动修改table的总宽度。

这时候我们就可以把所有td的宽度都写在html文件的style里，然后js读取对应的td宽度；当然我们也可以写在外部css文件里，但这时候用js调取就遇到问题了。

我在网上搜过很多关于js读取外部css文件的属性的资料，不知道是我用的方法不对还是怎样，总之就是不能正确调取。于是我自己写了一个读取外部css文件属性的方法。

思路很简单，就是用js先读取对应的css文件内容，然后在根据class名来截取字符串。

/*读取css文件代码*/

function getCss(sUrl) {

var ie = navigator.userAgent.indexOf(‘MSIE’) > 0;

var o = ie ? new ActiveXObject(‘Microsoft.XMLHTTP’) : new XMLHttpRequest();

o.open(‘get’, sUrl, false);

o.send(null);

return {

body: o.responseText

};

}

/*截取字符串代码*/

function str_substr(start, end, str) {

temp = str.split(start, 2);

content = temp[1].split(end, 2);

return content[0];

}

/*读取每个td宽度*/

$(document).ready(function() {

var maincss = getCss(‘css/main.css’).body;//读取css文件内容

maincss = maincss.replace(/[\r\n]/g, “”); //去掉回车换行

var tablewidth =0;

$(“#he th”).each(function() {//遍历每个td

var thclass = $(this).attr(“class”);//获取当前td的class名称

var css = str_substr(“.list_right .” + thclass, “}”, maincss);//根据名称去css文件里截取对应的字符串

css = str_substr(“width:”, “px”, css);//从这些字符串中提取出宽度

css = css.replace(/\ +/g, “”); //去掉空格

css = Number(css.replace(/[ ]/g, “”)); //去掉空格

tablewidth = tablewidth + css;//所有宽度相加，得出table总宽度

});

$(“. orderlisttable “).css(“width”, tablewidth + “px”);//给table添加宽度

});

/*html代码*/

序号管理操作订单信息订单状态物流状态物流人员姓名办卡详情时间地址等待心情客户要求实收款回访状态下单渠道订单归属下单优惠备注客户投诉客户评价评价详情