Set style attributes

开发工具与关键技术:JS
作者:赵纯雨
班级:1803
撰写时间:2019.6.10

When setting style attributes, you must write style out. It can be divided into six parts:
1. Change HTML output stream: JavaScript can create dynamic HTML content. Today’s date is: Mon Jun 26 11:36: 03 2017, in JavaScript, document.write() can be directly used to write content directly to the HTML output stream. Tip: You can't use it after loading the document, document.write(). Writing this way will overwrite the document, as shown below:

old header

![Insert picture description here](https://img-blog.csdnimg.cn/20190617155332708.png)

Second, change the HTML content: Modify the HTML content it the easiest way is to use the innerHTML property, if you need to change the content of HTML elements, please use this syntax: document.getElementById (id) .innerHTML = new HTML;
is to

this is a paragraph

The text changes to New Text.
docment.getElementById("p1").innerHTML = "New Text";
Third, change the HTML attributes: document.getElementById(id).attribute=new value find the specific ID, and then click the specific attributes, the above HTML document contains id=”image” element, we use HTML DOM to get id=”image”, JavaScript changes the attributes of this element:
Insert picture description here
4. Create a new HTML element: If you need to add a new element to HTML DOM, you must first create 1 this Element (element node), and then append it to the existing element:
Insert picture description here
Five: This code is creating a new

Element: var para = document.createElement("p"); If you need to add a question to the § element, you must first create a question node, this code creates a text node: var node = document .createTextNode("This is a new paragraph"):
Insert picture description here
Visibility ='hidden' to change whether it is displayed or not. If you need to change the style of HTML elements, please use this syntax: document.getElementById.style.property=new style.
1. Javascript can change all HTML elements in the page.
2. Javascript can change all the HTML attributes in the page.
3. Javascript can change all the CSS styles in the page.
4. Javascript can change all events in the page and respond to
changes. The text content is to directly point out a specific attribute, change a specific attribute of style at the style point, and therefore react to events.
5. Event response:
Insert picture description here
We can execute javasript when an event occurs. For example, when the user clicks on an HTML element, if the user needs to execute code when the user clicks on an element, please add Javascript code to an HTML event attribute: οnclick=Javascript.
Examples of HTML events: when the user clicks the mouse, when the web page is loaded, when the image is loaded, when the mouse moves over the element, when the HTML form is submitted, when the user triggers a button.
6. Assign the onclick event to the Button element:

Click the button to execute the displayDate function

Click here Document.getElementById("myBtn").onclick = function () {displayDate()}; Function displayDate(){ Document.getElementById("demo").innerHTML = Date();} Get a button label, id It is myBtn, and the curly braces are an operation to be performed in the function. The above is the syntax and usage of the style attribute change.

Guess you like

Origin blog.csdn.net/weixin_44540773/article/details/92638981