Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to use JavaScript operation elements to change the page content style". In daily operations, I believe many people have doubts about how to use JavaScript operation elements to change the page content style. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the questions of "how to use JavaScript operation elements to change the page content style". Next, please follow the editor to study!

1. Operation elements

1.1. Change the content of the element

Document displays the current system time at a certain time

one hundred and twenty three

/ / 1. When we click on the text in Anne div, it will change / / (1), get the element var btn = document.querySelector ('button'); var div = document.querySelector (' div'); / / (2), register event btn.onclick = function () {div.innerText = getDate () } function getDate () {/ / case: get the current system time on Wednesday, November 24, 2021: 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' + dates + 'day' + arr [day] } / / 2. Event var p = document.querySelector ('p') can be displayed without registering the event; p [XSS _ clean] = getDate (); 1.2.The difference between innerText and innerHtml Document

I am the text 123.

/ / the difference between innerText and ineerHtml / / 1, innerText does not recognize html tags, innerHtml recognizes html tags var div= document.querySelector ('div'); div.innerText =' today is: 2021 tags; / / innerHtml identifies html tags W3C standard / / div [XSS _ clean] = 'today is: 2021' / / 2. These two attributes are readable and writable. You can get the contents of the element var p = div [XSS _ clean] = document.querySelector ('p'); / / innerText removes spaces and wraps console.log (p.innerText); console.log (p [XSS _ clean]); 1.3. Manipulate the element to modify the element attribute Document, Andy Lau and Jacky Cheung

/ / modify element attribute src / / 1, get element var ldh = document.getElementById ('ldh'); var zxy = document.getElementById (' zxy'); var img = document.querySelector ('img'); / / 2, register event handler zxy.onclick = function () {img.src =' images/zxy.jpg' Img.title= "Jacky Cheung";} ldh.onclick = function () {img.src = 'images/ldh.jpg'; img.title= "Andy Lau;} 1.4.Timesharing time case Document img {width: 300px;}

Good morning, dear. Write the code var img = document.querySelector ('img'); var div = document.getElementById (' div'); / / get the current system time var time = new Date (); var h = time.getHours (); if (h)

< 12){ img.src = 'images/s.gif'; div[xss_clean] = "亲，上午好，快去写代码"; }else if(h < 18){ img.src = 'images/x.gif'; div[xss_clean] = "亲，下午好，快去写代码"; }else{ img.src = 'images/w.gif'; div[xss_clean] = "亲，晚上好，快去写代码"; } 1.5、表单的属性操作 Document 按钮 // 1、获取元素 var btn = document.querySelector('button'); var input = document.querySelector('input'); // 2、注册事件 处理程序 btn.onclick = function(){ // input[xss_clean] = '点击了';这个是 普通合资 比如div 标签里面的内容 // 表单里面的值 文字内容是通过 value 来修改的 input.value = '被点击了'; // 如果想要某个表单被禁用 不能再点击disabled 我们想要这个按钮 button禁用 // btn.disabled = true; this.disabled = true; // this 指向的是事件函数的调用者 } 1.6、仿京东隐藏显示密码操作 Document .box { position: relative; width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; } .box input { width: 370px; height: 30px; border: 0; outline: none; } .box img { position: absolute; top: 5px; right: 7px; width: 24px; }

/ / 1. Get the element var eye= document.getElementById ('eye'); var pwd = document.getElementById (' pwd'); / / 2, register the event handler var flag = 0; eye.onclick = function () {/ / flag must operate if (flag = = 0) {pwd.type = 'text' after one click Eye.src= "images/open.png"; flag = 1; / / assignment operation} else {pwd.type='password'; eye.src= "images/close.png"; flag = 0;}}

1.7. Style attribute operation

Document div {width: 200px; height: 200px; background-color: pink;} / / 1, get element var div = document.querySelector ('div'); / / 2, register event handler div.onclick = function () {this.style.backgroundColor =' purple' This.style.width = '250pxcodes;} 1.8.Show Hidden QR Code

Key point: modify display:none

Document

/ / 1. Get the element var btn = document.querySelector ('.close-btn'); var img = document.querySelector (' img'); / / 2. Register the event program to handle btn.onclick = function () {btn.style.display = 'none' At this point, the study on "how to use JavaScript operation elements to change the content style of the page" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.