web学习记录-JS-12

Posted 2021-02-03 xihuanjiuquqiqang

使用DOM修改CSS样式

通过JS修改CSS样式

　　元素.style.样式名 = 样式值；　　注意：如果CSS的样式名中含有-号，不合法。如background-color，需去掉-号，样式名修改为驼峰命名法；

　　通过style属性设置的都是内联样式，内联样式有较高的优先级，通过JS修改会立刻显示；

　　如果样式中写有！impotent，此时样式为最高优先级，JS修改会失效；，尽量不用；

读取样式

　　元素.style.样式名；

　　通过style属性读取的都是内联样式；无法读取样式表中的样式；

获取元素当前显示的样式

　　元素.currentStyle.样式名；　　只有IE浏览器支持；

　　在其他浏览器中，使用getComputedStyle（）来获取元素的当前样式；是window的方法，可以直接使用；

　　　　需要两个参数，第一个：要获取样式的元素；第二个，可以传递一个伪元素，一般都传null；

　　　　该方法会获取一个对象，对象封装了当前元素对应的样式；

　　　　可以通过对象.样式名来读取样式，如果获取的样式没有设置，则会获取真实的值，而不是默认值；

　　　　该方法不支持IE8及以下的浏览器；

　　通过这俩方法读取到的样式都是只读的，不能修改；

定义一个函数，用来获取指定元素的当前的样式

　　参数：obj：要获取样式的元素；　　name：要获取的样式名；

　　function getStyle（obj，name）｛　 

　　　　　　if（window.getComputedStyle）{

　　　　　return getComputedStyle（obj，null）[name]；}

　　　　　else{

　　　　　return  obj.currentStyle[name]；}

　　｝

 　　window.getComputedStyle?return getComputedStyle（obj，null）[name]：return  obj.currentStyle[name]；

需要加window前缀

其他样式的操作属性

clientWidth　　clientHeight　　这两个属性可以获取元素的可见宽度和高度；

　　　　　　　　　　　　　　这些属性都是不带PX的，返回的一个数字，可以直接计算；

　　　　　　　　　　　　　　会获取元素的宽，高，包括内容区和内边距；

　　　　　　　　　　　　　　这些属性都是只读，不能修改；

offsetWidht　　offsetHeight　   获取元素的整个的宽度和高度，包括内容区，内边距和边框；

offsetParent　　获取当前元素的定位父元素；

　　　　　　　 会获取到离当前元素最近的开启了定位的祖先元素；

　　　　　　　 如果所有祖先元素都没定位，则返回body；

offsetLeft　　offsetTop　　当前元素相对于其定位父元素的水平，垂直偏移量；

scrollHeight　　scrollWidth　　可以获取元素整个滚动区域的高度，宽度；

scrollLeft　　可以获取水平滚动条滚动的距离；

scrollTop　　可以获取垂直滚动条滚动的距离；

当满足scrollHeight - scrollTop == clientHeight是，说明垂直滚动条滚动到底了；

当满足scrollWidth - scrollLeft == clientHeight是，说明水平滚动条滚动到底了；

如果为表单项添加一个属性disabled=“disabled”，则表单项将变成不可用；

onscroll，该事件会在元素的滚动条滚动时触发；

事件对象　　当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数；事件对象中封装了相关事件的一切信息；

　　onmousemove　　会在鼠标在元素中移动时触发；

　　clientX　　clientY　　获取鼠标指针的水平，垂直坐标；

在IE8及以下浏览器中，响应函数被触发时，浏览器不会传递事件对象，是将事件对象作为window对象的属性保存的；

　　兼容性  enent = enent || window.enent;

 

pageX和pageY 可以获取鼠标当前页面的坐标  IE8中不支持；

chrome认为浏览器的滚动条是body的，可以通过document.body.scrollTop获取；

火狐等浏览器认为浏览器滚动条是html的，可以通过doucment.documentElement.scrollTop获取;

 

冒泡

事件的冒泡（Bubble）事件的向上传递，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发；

开发中，冒泡事件大部分是有用的；可以用事件对象取消冒泡；

可以将事件对象的cancelBubble设置为true可取消冒泡；