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代码*/

</table>

未经允许不得转载：前端撸码笔记 » js读取外部css文件的属性

内容推荐