样式表的属性 --- CSS脚本化

JS主要工作,在以前主要是在前端美化一下页面。然后加一些特效
JS去操作CSS属性工作,去添加动画
因为有了JS 用起来就可以将页面做的更加完美。
很多时候,
这样一块,刚开始学习程序的时候程序员刻意避开了。js主要工作。
写的代码就可以更加灵活。写的更加复杂。

操作样式表,有三种样式
行内样式,内部样式
外部样式
还有一种@import 基本没有人用。

行内样式最简单。
给div添加style属性 然后宽高背景色。固定死了,想用JS把背景色改下。
拿到style的值,写在JS里面。更改和获取行内样式。先得拿到 那先给div一个id="box"
拿到后,getElementById("box")
拿到的是字符串的值。
注意JS命名规则里面链接符是不可以的。统统改成驼峰命名法。
我们就可以拿到了。除了这种方法还有JS通用方法。尊重CSS最初
想获取背景色,中括号 可以用链接符。["xsycx -sc s"],这种写法可以用变量。可以更改
加个按钮,更改div的背景色

  1. 先找到 document.getElementsByTagName("button")
    改样式表不会影响其他属性。
    HTML5里面新增的色盘很快就出来,两个一匹配就很容易不知道了。hsl只能更改行内样式,只能改行内样式。

内部样式,可以读,不好去更改。读不了。style只能读行内样式。添加行内样式。优先级,行内样式优先级高。想要更改行内样式。

问题来了,怎么获取外部样式?
获取比较麻烦,ie里面比较简单。get
box.currentStyle 理解为获取外部样式表或者内部,不包括行内。
只支持IE下获取内部或者外部样式表。可以当做类数组来操作。单双引号嵌套省的去转义。如果用双引号用斜杠去转义一下。如果直接在,直接输它的值,报错

Cannot read property 'width' of underfined

我们不能读取一个属性只支持IE
如果想要在api
可以获取除了IE外其他的浏览器的内部和外部样式。
参数比较多一些。要获取的dom对象的样式表
要获取哪个对象。
伪对象 CSS3新增,如果不是正常对象,就要加上,如果不是就加上null,不给 ,不知道,能不能省。测试,测试的不全,复杂,官方的api是mdn 火狐出的,比较全。js里面很多浏览器商来实现,火狐的完全按照规则来的。里面大部分是英文的。尖括号是必须要填的一个属性<>,而[]指的是不一定要填。
Summary:告诉你这个方法怎么用的。
自学能力:
例句:
css的值,在激活的基本的值的计算,获取到样式表
Syntax :语法
语法格式要看的懂。

封装下。一般情况下,封装一个函数,兼容所有浏览器来获取外部和内部样式表
函数定义,这块用的特别多。获取某个样式。方法,将来,返回这个元素属性是

可以先获取。然后if(逻辑运算)浏览器的兼容

function getStyleValue(ele,prop) {
if(ele.currentStyle){
    return ele.currentStyle[prop];
}else{
    return window.getComputedStyle(ele,null)[prop];
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,693评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,083评论 19 139
  • 佛罗伦萨第二天。酒店离百花圣母大教堂500米不到,每天来来去去看着它的倩影,甚为满足。 酒店比较古老,但设施比较全...
    微澜细语阅读 4,453评论 0 10
  • 目标:种出理想的伴侣,财富增长。 感恩冥想: 1、感恩今天早上爸爸叫我起床,让我早早的去查体。 2、感恩今天帮我查...
    小兔兔姐姐爱吃胡萝卜阅读 1,324评论 0 0
  • 我是一只折翼的天使,掉落人间,向往天空,向往自由,无奈被世俗羁绊,成为一个凡人。
    小七521阅读 1,796评论 0 0

友情链接更多精彩内容