javascript修改元素属性
1、打开WebStorm开发工具，新建test.html文件如下图
2、在test.html的body标签内新建一个div标签，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1" title="我是div">hello </div>
</body>
</html>
3、查看效果如下，‘我是div’字样是title属性值，当鼠标移动过去会显示
4、修改代码添加script脚本如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1" title="我是div">hello </div>
<script type="text/javascript">
var div = document.getElementById('div1')
console.log(div.title)
div.title = '我是新div_title'
</script>
</body>
</html>
5、查看效果如下，正确打印出元素title属性值，鼠标移动到div显示的内容也变了
6、测试更改元素样式style，修改代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1" title="我是div" style="width: 200px;height: 100px;background-color: #0b2e13;color: white">hello</div>
<script type="text/javascript">
var div = document.getElementById('div1')
console.log(div.title)
div.style.backgroundColor = '#FF0000'
div.title = '我是新div_title'
</script>
</body>
</html>
7、查看效果如下图，成功修改了的背景色
声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。
阅读量：59
阅读量：95
阅读量：163
阅读量：106
阅读量：23