js中改变元素的属性
来源:互联网 发布:淘宝网不能登录密码 编辑:程序博客网 时间:2024/06/15 20:37
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>
此代码的实现效果
可以通过改变属性的名称、属性名称的值对下面的div的属性进行改变
这是"[]"有的性能,而"."则不具备此种能力
- js中改变元素的属性
- JS元素中属性的规范使用
- JS设置和改变元素属性
- js 改变元素的位置
- JS中修改标签中元素的属性值
- jquery改变页面元素的属性
- js中获取元素属性、currentStyle与getComputedStyle的区别
- JS-DOM模型中元素的位置、尺寸属性
- 用JS改变的元素CSS样式
- 用JS改变的元素CSS样式
- 用JS改变的元素CSS样式
- 用JS改变的元素CSS样式
- 如何使用JS来改变CSS样式 -- 元素的样式属性名称在CSS和JS中的对照表
- js改变元素样式
- JS中元素动画效果Transform属性
- JS中document操作元素属性
- js改变input里的属性 style
- js改变input的type属性
- 暴力破解(Brute Force)
- cas单点登录(sso)简单Demo
- java多线程
- oracle11安装在linux配置参考
- OAuth协议
- js中改变元素的属性
- Ant 命令总结
- 接口测试 Http 接口测试框架 (开源 + 已投入实际项目中)
- 浅谈simhash及其python实现
- 按层显示
- 一般常见的网站攻击方式
- ant build各个指令的详细作用 ant讲解
- 创建JRootPane面板,并在这个面板中添加菜单
- MOOC清华《程序设计基础》第2章第4题:解方程2