28.JS

93.文档的加载

// onload事件会在整个页面加载完成之后才触发 // 为window绑定一个onload事件 // 该事件对应的响应函数将会在页面加载完成之后执行 // 这样可以确保我们的代码执行时所有的DOM对象已将加载完毕了 window.Onload= function() { alert("Alert"); } 点我一下 // 获取按钮对象 var btn = document.getElementById("btn"); // 为按钮绑定一个单击响应函数 btn.Onclick= function() { alert("hello!"); };

101. dom查询的剩余方法

window.Onload= function () { // 获取body标签 var body = document.getElementsByTagName("body")[0]; console.log(body); // 在document中有一个属性body，它保存的是body的引用 var body1 = document.body; console.log(body1); // document.documentElement保存的是HTML根标签 var html = document.documentElement; console.log(html); // 代表页面中所有的元素 var all = document.all; console.log(all); // 和上面结果一样 all = document.getElementsByTagName("*"); console.log(all); // 根据元素的class属性值查询一组元素节点对象 var box1 = document.getElementsByClassName('box1'); console.log(box1); // document.querySelector() // 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象 // 使用该方法只会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个 var div = document.querySelector(".box1 div"); console.log(div.innerHTML); // 它返回的是一个数组，无论是一个还是多个 var divs = document.querySelectorAll("div"); console.log(divs); }

107 操作内联样式

window.Onload= function() { let box = document.getElementById("box"); let btn = document.getElementById("btn"); btn.Onclick= function() { // 通过JS修改元素的样式： // 元素.style.样式名 = 样式值 // 注意：如果CSS的样式名中含有-，这种名称在JS中是不合法的， // 比如background-color，需要将这种样式名修改为驼峰命名法 // 去掉-，然后将-后的字母大写 // // 我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级， // 所以通过JS修改的样式往往会立即显示 // 但是如果在样式中写了!important，则此时样式会有最高的优先级， // 即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要 // 为样式添加!important box.style.width = "300px"; box.style.height = "300px"; box.style.backgroundColor = "yellow" }; let btn02 = document.getElementById("btn02"); btn02.Onclick= function() { // 读取box的样式： // 通过style属性设置和读取的都是内联样式，无法读取样式表中的样式 alert(box.style.width); }; };

108 获取元素的样式

window.Onload= function() { let btn01 = document.getElementById("btn01"); let box1 = document.getElementById("box1"); btn01.Onclick= function() { // 获取元素正在显示的样式 // 如果当前元素没有设置该样式，则获取它的默认值 // currentStyle只有IE浏览器支持 console.log(box1.currentStyle.width); // 其他浏览器中使用getComputedStyle()方法获取当前样式 // 这个方法时window的方法，可以直接调用 // 第一个参数：要获取样式的元素 // 第二个参数：可以传递一个伪元素，一般都传null // 该方法返回一个对象，对象中封装了当前元素的样式 // 两者都是只读的，不能修改。如果要修改只能通过style属性 console.log(getComputedStyle(box1,null).width); } }

109 getStyle()方法

function getStyle(obj,name) { if(window.getComputedStyle) { return getComputedStyle(obj,null)[name]; } else{ return obj.currentStyle[name]; } } var width = getStyle(box1,"width"); alert(width);