How to modify elements in javascript-JS Tutorial-php.cn

How to modify elements in javascript

青灯夜游

Release： 2021-06-18 17:18:51

Original

4826 people have browsed it

Method: 1. Use the "element.innerText='value'" or "element.innerHTML='value'" statement to modify the element content; 2. Use the "element.style" or "element.className" statement Modify element style properties.

How to modify elements in javascript

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

Operation to modify elements

JavaScript's DOM operation can change the content, structure and style of the web page. We can use DOM operation elements to change the content, attributes, etc. inside the element.

Change the content of the element

element.innerTextThe content from the starting position to the ending position, But it removes the html tag, and at the same time, the spaces and line breaks will also be removed. All the content from the starting position to the end position of

element.innerHTML, including the html tag, while retaining the spaces and line breaks.

innerText does not recognize HTML tags, innerHTML recognizes HTML tags. These two properties are readable and writable.

<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>

Copy after login

How to modify elements in javascript

After running, a certain time will be displayed. When you click to display the current system time, the current date and week will be displayed.

How to modify elements in javascript

Modify style attributes

element.style modifies the inline operation, element.className modifies the class name Style attribute

<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>

Copy after login

After the program is run, a pink box with a width and height of 200 pixels will appear. Click the box to turn it into a purple box with a width of 300 pixels and a height of 200 pixels. JS modifies the style style operation and produces inline styles.

Use className to change style attributes

<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>

Copy after login

[Related recommendations: javascript learning tutorial]

The above is the detailed content of How to modify elements in javascript. For more information, please follow other related articles on the PHP Chinese website!