JS主要工作,在以前主要是在前端美化一下页面。然后加一些特效
JS去操作CSS属性工作,去添加动画
因为有了JS 用起来就可以将页面做的更加完美。
很多时候,
这样一块,刚开始学习程序的时候程序员刻意避开了。js主要工作。
写的代码就可以更加灵活。写的更加复杂。
操作样式表,有三种样式
行内样式,内部样式
外部样式
还有一种@import 基本没有人用。
行内样式最简单。
给div添加style属性 然后宽高背景色。固定死了,想用JS把背景色改下。
拿到style的值,写在JS里面。更改和获取行内样式。先得拿到 那先给div一个id="box"
拿到后,getElementById("box")
拿到的是字符串的值。
注意JS命名规则里面链接符是不可以的。统统改成驼峰命名法。
我们就可以拿到了。除了这种方法还有JS通用方法。尊重CSS最初
想获取背景色,中括号 可以用链接符。["xsycx -sc s"],这种写法可以用变量。可以更改
加个按钮,更改div的背景色
- 先找到 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];
}
}