JS 操作CSS

html-css030

JS 操作CSS,第1张

<html>

<style type="text/css">

body{background-color:#000000background-image:url()background-position:left topbackground-repeat:repeatbackground-attachment:fixed}

#bg {

background-position: 10px 20px

background-color: #999999

}

</style>

<body id="body" >

<div id="bg">test</div>

<script language="JavaScript">

alert('这是bg的:'+document.getElementById("bg").currentStyle.backgroundPositionX)

</script>

</body>

</html>

类不是唯一的,id才是唯一

JS文件中动态调用外部css, 文件方法如下:

function loadExtentFile(filePath, fileType){

if(fileType == "js"){

var oJs = document.create_rElement('script')

oJs.setAttribute("type","text/javascript")

oJs.setAttribute("src", filename)//文件的地址 ,可为绝对及相对路径

document.getElementsByTagName_r("head")[0].appendChild(oJs)//绑定

}else if(fileType == "css"){

var oCss = document.create_rElement("link")

oCss.setAttribute("rel", "stylesheet")

oCss.setAttribute("type", "text/css")

oCss.setAttribute("href", filename)

document.getElementsByTagName_r("head")[0].appendChild(oCss)//绑定

}

}

loadExtentFile("js/func.js", "js")

loadExtentFile("default.css", "css")

清空:

var lists = document.getElementsByTagName_r("link")

for ( var i = 0i <lists.lengthi++) {

if (lists[i].getAttribute("href").indexOf(".css") != -1) == -1) {

lists[i].parentNode.removeChild(lists[i])

}

}

上面的判断语句中可以加入自己的判断。