• 你真的知道css三种存在样式(外联样式、内部样式、内联样式)的区别吗?


      css样式在html中有三种存在形态:

      内联样式:<div style="display: none"></div>

      内部样式: <style></style>

      外联样式:<link href="" />

      三者的优先级为:内联样式>内部样式>外联样式。

      你可能会对内部样式和外联样式的优先级产生怀疑。反正我怀疑过,是不是两者的先后顺序不同会产生覆盖?当然经过测试,完全没有这种情况。~至于原理,我觉得是和渲染机制有关。


      分割线~其实以上都是基础知识,下面才是要讲的重点。

      我们知道,在js中修改节点的长、宽、背景色等等样式属性是很常见的操作。比如

    var targetObj = document.getElementById("test");
    targetObj.style.width = "100px";

      如果targetObj本身就已经设定了宽度。在js中通过target.style.width去读取那个既定宽度时,会出现:当宽度是在内联中定义可以读取到,如果宽度不是在内联中定义,targetObj.style.width返回的就是一个空串。

      总结:

      targetObj.style.width去获取的应该是在内联中定义的宽度,如果宽度定义在非内联中,永远不会获取到值,尽管你看到元素在浏览器中呈现得有长有高的;

      通过js代码动态添加targetObj.style.width的优先级是最高的,但是你可以理解为它是添加到内联样式中,而事实也确实是如此。其实对于这句话其实还可以再补充一点点。对于targetObj.className = "newStyle",设置类设置新样式的手段,请务必保证添加的类的样式有足够高的优先级,否则将看不到任何效果。你可以在.newStyle的样式属性定义中增加!important,提高优先级,但是这样在ie6中不奏效,反而需要用带下划线的属性另外定义(hack技术)。我采用的方法基本是通过给.newStyle增加id标签来提高其优先级。比如(#name li.newStyle和.newStyle相比,优先级不知高了几个档次),而且所有浏览器都支持。

      探索到这里,还可以继续探索下去,对于样式操作,有没有更有效的方式?cssText,提供了批量处理功能,

      详见另一篇博文:http://www.cnblogs.com/Iwillknow/p/3691490.html

  • 相关阅读:
    vue的echart基本使用
    vue和angular中moment.js格式化时间插件
    vue-element的上传图片
    vue小问题-验证规则的坑
    前端请求的接口来自不同的服务器处理
    vue报错:Invalid prop: type check failed for prop "index". Expected String with value
    vue注册页面表单元素
    项目的上传 /码云(git)
    前端工程化-模块化
    fs && path.join()
  • 原文地址:https://www.cnblogs.com/Iwillknow/p/3691492.html
Copyright © 2020-2023  润新知