JS 学习游记三DOM对象操作

最新推荐文章于 2022-08-20 19:00:00 发布

清雨未尽时

最新推荐文章于 2022-08-20 19:00:00 发布

阅读量168

点赞数

分类专栏： js 文章标签： JS

本文链接：https://blog.csdn.net/kangguang/article/details/79416048

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.设置CSS值

<head>
    <meta charset="UTF-8">
    <title>康释文</title>
    <script type="text/javascript">
       function change() {

            var ce = document.getElementById("fenzhen");

            ce.style.color = "blue";
            ce.style.backgroundColor = "red";
            ce.style.margin="20px";
        }
    </script>

</head>
<body style="background-color:orange">
<div id="fenzhen">
    <h1
        style="color:blue;
    background-color:
    gray;margin:20px">绿叶学习网</h1>
    <input type="button" value="改变样式" οnclick="change()"/>
</div>


</body>

2.创建DOM节点

1) createElement()

<body style="background-color:orange">

<script type="text/javascript">

    var body = document.body;
    var  input = document.createElement("input");
    input.value = "这是一个新创建的按钮";
    body.appendChild(input);
</script>

2) createTextNode()

<body style="background-color:orange">
<p id ="demo">单击按钮创建文本节点。</p>
<button οnclick="myFunc()">点我</button>
<script type="text/javascript">
    function myFunc() {
        var t = document.createTextNode("HelloWorld");
        document.body.appendChild(t);
    };
</script>

</body>

3.创建节点的HTML

<body style="background-color:orange">
<div id="qianduan"></div>
<script type="text/javascript">

    document.all.qianduan.innerHTML="<span style= color:red;>前端开发</span><p style=color:blue;font-weight: bold;>js入门 </p";
</script>

</body>