通过innerHTML、innerText 和 textContent 都能修改元素的内容
通过innerHTML修改元素内容，如果内容中有标签，会转换成标签后，再添加 <head> <meta charset="utf-8"> <script> window.onload = function(){ let oDiv = document.querySelector('div'); oDiv.innerHTML = '<span>我是innerHTML添加的span</span>'; console.log(oDiv) } </script> </head> <body> <div> 我是div <h1>我是标题</h1> <p>我是段落</p> </div> </body>2. 通过innerText和textContent设置元素内容，如果元素中包括标签，不会将其转化成标签，而是直接当做字符串处理
<head> <meta charset="utf-8"> <script> window.onload = function(){ let oDiv = document.querySelector('div'); oDiv.innerText = '<span>我是innerHTML添加的span</span>'; console.log(oDiv) } </script> </head> <body> <div> 我是div <h1>我是标题</h1> <p>我是段落</p> </div> </body>3. 不能通过innerHTML / innerText / textContent 获取input的输入值。如果想获取input的输入值，使用 表单id(class名等）.value 的方式
1.通过 .style 设置的是元素的行内样式，会覆盖该元素的同名样式 2.想读取元素的class属性，不能使用 元素.class(class是关键字) 要使用 元素.className 的形式
* 通过style属性设置和读取的样式是内联样式，优先级高，设置后立即显示。无法读取样式表中的样式 * 读取样式的语法：元素.style.样式名 * 设置样式的语法：元素.style.样式名 = 样式值 * 注意：样式名中有-，在JS中不合法，如background-color要将此类样式名修改成驼峰命名法：去掉-，然后将- 后的首字母大写如 background-color 改成backgroundColor * 但是如果在样式中设置了某个样式是!important，此样式拥有最高优先级 即使在JS中覆盖，也不能修改该样式 <head> <meta charset="utf-8"> <script> window.onload = function(){ let oDiv = document.querySelector('#box'); oDiv.style.backgroundColor = 'blue'; } </script> <style> #box{ width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div id="box"> </div> </body>3. 通过 元素.style 只能读取元素的行内样式。通过内联样式等形式设置的css不能被获取
<head> <meta charset="utf-8"> <script> window.onload = function(){ let oDiv = document.querySelector('#box'); oDiv.style.backgroundColor = 'blue'; console.log("style获取不到非行内样式"+oDiv.style.width);// 输出为空 oDiv.style.width = '1000px'; console.log("style只能获取到行内样式"+oDiv.style.width); } </script> <style> #box{ width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div id="box"> </div> </body>getComputedStyle()
参数：要获取样式的该元素返回该元素对应的样式的对象 通过对象.样式名 来获取样式值如果获取的样式值没有设置，不会返回默认值，而是返回真实值。如，没有设置width，不会返回auto，而是一个长度。 <head> <meta charset="utf-8"> <script> window.onload = function(){ let oDiv = document.querySelector('#box'); let css = getComputedStyle(oDiv); console.log(css); console.log(css.position);//static } </script> <style> #box{ width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div id="box"> </div> </body>重复执行setInterval 只执行一次 setTimeout 使用 clearInterval / clearTimeout（定时器标识）关闭定时器
在没有滚动条时，clientX的大小 = pageX的大小 clientY的大小 = pageY的大小 clientX/clientY无论高级浏览器还是低级浏览器都支持 pageX/pageY只有高级浏览器支持, 低级浏览器是不支持的(IE9以下)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="fonts/iconfont.css" rel="stylesheet"> <script> window.onload = function () { let box = document.querySelector('#box'); box.onclick = function (event) { //offsetX/offsetY: 事件触发相对于当前元素自身的位置 没有单位 console.log(event.offsetX);//26 鼠标点击的位置距离div左边框的距离 console.log(event.offsetY);//33 鼠标点击的位置距离div上边框的距离 //clientX/clientY: 事件触发相对于浏览器可视区域的位置(不包括滚动轴滚动的区域) console.log(event.clientX);//131 鼠标点击的位置距离浏览器左边框的距离 console.log(event.clientY);//221 鼠标点击的位置距离浏览器顶部边框的距离 // pageX/pageY: 事件触发相对于整个网页的位置(如果存在滚动区域，包括滚动轴滚动的距离) console.log(event.pageX); //131 console.log(event.pageY); //850 此时有垂直滚动轴 } } </script> <style> * { margin: 0; padding: 0; } #box { width: 100px; height: 100px; background: red; margin-left: 100px; margin-top: 800px; } </style> </head> <body> <div id="box"></div> </body> </html>