Shulou(Shulou.com)05/31 Report--

This article focuses on "how to modify elements in javascript". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to modify elements in javascript.

Methods: 1, use "element.innerText=' value" or "element [XSS _ clean] = 'value'" statement to modify element content; 2, use "element.style" or "element.className" statement to modify element style attribute.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

Operation to modify elements

The DOM operation of JavaScript can change the content, structure and style of the web page, and we can use the DOM operation element to change the content, attributes and so on.

Change the content of an element

Element.innerText content from the start position to the end position, but it removes the html tag, as well as spaces and line breaks

Element [XSS _ clean] everything from the start position to the end position, including the html tag, while leaving spaces and line breaks.

InnerText does not recognize HTML tags, while innerHTML recognizes HTML tags. These two attributes are readable and writable.

Displays the current time of the system var btn = document.querySelector ('button'); var div = document.querySelector (' div'); 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 = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; var day = date.getDay (); return 'today is' + year+' year'+ month+' month'+ dates+' day'+ arr [day] }

After running, a certain time is displayed, and the current date and week can be displayed when you click to display the current time of the system.

Modify style properti

Element.style modifies inline operations, element.className modifies class name style attributes

Div {width:200px; height:200px; background-color:pink;} var div = document.quertSelector ('div'); div.onclick = function () {this.style.backgroundColor =' purple'; this.style.width='300px';}

After the program runs, a pink box with a width of 200 pixels and a height of 200 pixels appears. Click on the box and turn it into a purple box 300 pixels wide and 200 pixels high. JS modifies the style style operation, resulting in inline styles.

Use className to change style properties

Div {width:100px; height:100px; background-color:pink;} .change {width:200px; height:200px; background-color:purple;} text vet test = document.querySelector ('div') Test.onclick = function () {/ / change the class name of the current element to change this.className = 'change';} at this point, I believe you have a deeper understanding of "how to modify elements in javascript". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.