Rumah > hujung hadapan web > tutorial js > javascript怎么修改元素

javascript怎么修改元素

青灯夜游
Lepaskan: 2021-06-18 17:18:51
asal
5001 orang telah melayarinya

方法:1、使用“element.innerText='值'”或“element.innerHTML='值'”语句修改元素内容;2、使用“element.style”或“element.className”语句修改元素样式属性。

javascript怎么修改元素

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

操作修改元素


JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。

改变元素的内容

element.innerText从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉

element.innerHTML起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行。

innerText不识别HTML标签,innerHTML识别HTML标签。这两个属性是可读写的。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<body>

    <button>

        显示系统当前时间

    </button>

    <div>

        某个时间

    </div>

    <script>

        var btn = document.querySelector(&#39;button&#39;);

        var div = document.querySelector(&#39;div&#39;);

        btn.onclick = function(){

            div.innerText = getDate();

        }

         

        function getDate(){

            var date = new Date();

            var year = date.getFullYear();

            var month = date.getMonth()+1;

            var dates = date.getDate();

            var arr = [&#39;星期日&#39;,&#39;星期一&#39;,&#39;星期二&#39;,&#39;星期三&#39;,&#39;星期四&#39;,&#39;星期五&#39;,&#39;星期六&#39;];

            var day = date.getDay();

            return &#39;今天是&#39;+year+&#39;年&#39;+month+&#39;月&#39;+dates+&#39;日&#39;+arr[day];

        }

    </script>

</body>

Salin selepas log masuk

在这里插入图片描述

运行后,显示某个时间,当点击显示系统当前时间即可显示进当前的日期及星期。

在这里插入图片描述

修改样式属性

element.style修改行内式操作,element.className修改类名样式属性

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<head>

    <style>

        div {

            width:200px;

            height:200px;

            background-color:pink;

        }

    </style>

</head>

<body>

    <div>

         

    </div>

    <script>

        var div = document.quertSelector(&#39;div&#39;);

        div.onclick = function(){

         this.style.backgroundColor = &#39;purple&#39;;

         this.style.width=&#39;300px&#39;;

        }

 

    </script>

</body>

Salin selepas log masuk

程序运行后,出现一个宽高均为200像素的粉红色盒子,点击盒子,变成宽300像素高200像素的紫色盒子。JS修改style样式操作,产生的是行内样式。

使用className更改样式属性

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<head>

    <style>

        div {

            width:100px;

            height:100px;

            background-color:pink;

        }

        .change {

            width:200px;

            height:200px;

            background-color:purple;

        }

    </style>

</head>

<body>

    <div>

       文本   

    </div>

    <script>

        vet test =document.querySelector(&#39;div&#39;);

        test.onclick = function(){

            //将当前元素的类名改为change

          this.className = &#39;change&#39;; 

        }

    </script>

     

</body>

Salin selepas log masuk

【相关推荐:javascript学习教程

Atas ialah kandungan terperinci javascript怎么修改元素. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan