网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 时尚美容

javascript修改元素属性

时间:2024-10-14 23:50:03

1、打开WebStorm开发工具,新建test.html文件如下图

javascript修改元素属性

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>

javascript修改元素属性

3、查看效果如下,‘我是div’字样是title属性值,当鼠标移动过去会显示

javascript修改元素属性

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>

javascript修改元素属性

5、查看效果如下,正确打印出元素title属性值,鼠标移动到div显示的内容也变了

javascript修改元素属性

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>

javascript修改元素属性

7、查看效果如下图,成功修改了的背景色

javascript修改元素属性
© 2025 小知经验
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com