如何利用JavaScript动态更换body的属性

首页 > IT计算机 > Web程序设计作者：RainFly 2016年7月31日 6:12 星期日热度：13244° 字号：小中大评论：2

时间：2016-7-31 6:12 热度：13244° 评论：2 条

由于自己不是专业学网页设计的所有不是很懂JavaScript和css，以下代码纯属瞎研究，搞了好几次都没成功也不知道是什么原因，估计是写语法有问题。

body标签的属性值获取方法通过getElementsByName("body") 返回拥有指定标签名的所有子元素的集合。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body style="font-size:12px;padding-left:8px;color:#fff">
<script language="javascript">
window.onload = function(){
var wndObj=document.getElementsByTagName("body");
alert(wndObj[0].getAttribute("style"));
}
</script>
</body>
</html>

按照上面的方法我测试了一下，

function chufa(){ 
document.getElementsByTagName("body")[0].setAttribute("style","background-size:cover;");
document.getElementsByTagName("body")[0].setAttribute("style","background-attachment:fixed;");
document.getElementsByTagName('body')[0].style.background="url(http://7xij7o.com1.z0.glb.clouddn.com/background2.jpg) rgba(194, 240, 194, 1) no-repeat";
}

但是结果是这样的js运行不了，不知道原因是什么，所有就继续研究了一下（下面这种方法是可以实现的）

function select_jpg1(){
document.getElementsByTagName("body")[0].setAttribute("style","background:url(http://7xij7o.com1.z0.glb.clouddn.com/background1.jpg) rgba(194, 240, 194, 1) no-repeat;background-size:cover;background-attachment:fixed;");
}

所有根据标签获得body的值需要通过一个setattribute函数来进行设置和修改，如果通过.style.background=xxx；多次是无效的。

继而可以通过触发相应函数来动态修改标签的属性。