js中改变元素的属性_js修改属性值的方法-CSDN博客

本文链接：https://blog.csdn.net/TC_16_zl/article/details/73048934

js中改变元素属性的方法

1、js中改变元素的属性值

格式：某元素.style.某属性 = '改变值';

例如：oDiv.style.width = '300px';

在js中如果遇到类似font-size这种属性，需要将其写为fontSize，在对它的值进行改变

2、js中改变元素的浮动值时会遇到兼容性的问题

IE情况下 styleFloat 非IE情况下 cssFloat

在设置元素的浮动属性时，为了兼顾其兼容性，我们一般便会这两个都进行设置

例如：oDiv.style.styleFloat = 'left';

oDiv.style.cssFloat = 'left';

为了避免我们设置浮动时要考虑它的兼容性，有以下一种方法

.left{ float:left;}

.right{ float:right;}

oDiv.className = 'left';

oDiv.className = 'right';

此方法可以很有效的避免考虑浮动的兼容性的问题

3、在js中改变元素的属性值可以用[ ]

在js中所有位置的"."都可以由"[ '变量名' ]"进行代替

js中style后的"."属性值是固定的，是不可以改变的

js中style后的"[ ]"属性值是可以改变的，不是固定的值

用以下代码进行举例并进行解释

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的简单练习</title>
<style>
div{ height:100px; width:100px; border:1px solid red;}
</style>
<script>
window.onload = function(){
var oAttr = document.getElementById('attr');
var oVal = document.getElementById('val');
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn.onclick = function(){
oAttr.value
oVal.value
oDiv.style[oAttr.value] = oVal.value;
};
};
</script>
</head>
<body>
<h1>js的简单的效果实现</h1>
请输入属性名称：<input type="text" id="attr" value="" /><br />
请输入属性值：<input type="text" id="val" value="" />
<input type="button" id="btn1" value="确定" />
<div id="div1"></div>
</body>
</html>