web学习记录-JS-12

使用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可取消冒泡;

 

 

 

 

 

 

 

                 

 

posted @ 2019-01-15 22:29  羅羊羊  阅读(129)  评论(0编辑  收藏  举报