javascript 改变 HTML 元素 element.innerHTML、.attribute、.setAttribute(attribute, value)、.style.property

最新推荐文章于 2024-02-05 22:49:06 发布

top啦它

最新推荐文章于 2024-02-05 22:49:06 发布

阅读量1.4k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45949073/article/details/107948970

版权

JavaScript 专栏收录该内容

61 篇文章 1 订阅

订阅专栏

改变元素的 inner HTML
element.innerHTML = new html content 改变元素的 inner HTML
eg:
div.innerHTML = '这是一条测试文本'
可以将<div></div>修改为<div>这是一条测试文本</div>
还可以通过这种方法将标签放入div标签之中
div.innerHTML = '<a>这是一个测试文本</a>'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA_Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script>
        window.onload = function () {
            var div = document.querySelector('div');
            div.innerHTML = '这是一条测试文本'
        }
    </script>
</head>
<body>
<div></div>
</body>
</html>

改变 HTML 元素的属性值
element.attribute = new value 改变 HTML 元素的属性值
eg:
给div标签改变属性值
先获得div标签：var div = document.querySelector('div');
改变标签属性(id)：div.id = 'content1'.
将div的id修改为content1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA_Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #content{
            background-color: #333333;
        /*    黑色*/
        }
        #content1{
            background-color: #528e34;
        /*    绿色*/
        }
    </style>
    <script>
        window.onload = function () {
            //element.attribute
            var div = document.querySelector('div');
            div.id = 'content1';//将div标签的id从content改为content1
        }
    </script>
</head>
<body>
<div id="content" style="width: 50px;height: 50px"></div>
</body>
</html>

改变 HTML 元素的属性值
element.setAttribute(attribute, value) 改变 HTML 元素的属性值
eg:
给div标签改变属性值
先获得div标签：var div = document.querySelector('div');
改变标签属性(id)：div.setAttribute('id','content1')
将div的id修改为content1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA_Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #content{
            background-color: #333333;
        /*    黑色*/
        }
        #content1{
            background-color: #528e34;
        /*    绿色*/
        }
    </style>
    <script>
        window.onload = function () {
            //element.setattribute(attribute,value)
            var div = document.querySelector('div');
            div.setAttribute('id','content1')//将div标签的id从content改为content1
        }
    </script>
</head>
<body>
<div id="content" style="width: 50px;height: 50px"></div>
</body>
</html>

改变 HTML 元素的样式
element.style.property = new style 改变 HTML 元素的样式
setAttribute是给html元素属性设置值的。html元素属性就是指的标签中的键值对的前者，例如<div id="name" class="text"><div>中的id和class就是html元素属性。（比方说span标签没有height属性，你用这个是无效的） .style.property="值"是用来设置css样式的。例如说document.getElementById("#name").style.background="red"设置文本框的背景颜色为红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA_Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script>
        window.onload = function () {
            //element.setAttribute(attribute,value)
            var div = document.querySelector('div');
            div.style.background = "red";//将div标签背景修改为 红色
        }
    </script>
</head>
<body>
<div id="content" style="width: 50px;height: 50px"></div>
</body>
</html>