javascript修改元素属性

 时间:2026-02-13 23:59:21

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修改元素属性

  • 如何使用SQLyog在数据库中索引数据
  • 如何在word文档改变字体样式?
  • jquery怎么获取a标签里面某个标签的值
  • 利用 Visual studio 制作 ASP.NET 网站(基础)
  • vs2010 C#语言 web网站开发实用技术—控件拖动
  • 热门搜索
    南京旅游景点地图 河南的旅游景点有哪些 去朝鲜旅游注意事项 长沙附近旅游景点 去泰山旅游 四月份去哪里旅游好 重庆到四姑娘山旅游 宁夏沙坡头旅游攻略 九寨沟最佳旅游时间 烟台旅游政务网官网