盒子 原来的位置 0 + 10 盒子现在的offsetLeft 10
|-5| = 5
这三个函数都是 数学函数
Math
比如说 consolelog(Mathceil(101)) 结果 是 2
consolelog(Mathceil(19)) 结果 2
consolelog(Mathceil(-13)) 结果 是 -1
比如说 consolelog(Mathfloor(101)) 结果 是 1
consolelog(Mathfloor(19)) 结果 1
consolelog(Mathfloor(-13)) 结果 是 -2
consolelog(Mathround(101)) 结果 是 1
consolelog(Mathround(19)) 结果 是 2
匀速动画的原理： 盒子本身的位置 + 步长
缓动动画的原理: 盒子本身的位置 + 步长 (不断变化的)
( 缺陷：只能水平方向！随后的“封装运动框架单个属性会进一步改进” )
我们访问得到css 属性，比较常用的有两种：
点语法可以得到 width 属性 和 top属性 带有单位的 。 100px
但是这个语法有非常大的 缺陷， 不变的。
后面的width 和 top 没有办法传递参数的。
var w = width;
boxstylew
最大的优点 ： 可以给属性传递参数
我们想要获得css 的样式， boxstyleleft 和 boxstylebackgorundColor
但是它只能得到 行内的样式。
但是我们工作最多用的是 内嵌式 或者 外链式 。
怎么办？
核心： 我们怎么才能得到内嵌或者外链的样式呢？
外部（使用<link>）和内嵌（使用<style>）样式表中的样式（ie和opera）
两个选项是必须的， 没有伪类 用 null 替代
我们这个元素里面的属性很多， left top width ===
我们想要某个属性， 就应该 返回该属性，所有继续封装 返回当前样式的 函数。
千万要记得 每个 的意思 ： 那是相当重要
flag在js中一般作为开关，进行判断。
等动画执行完毕再去执行的函数 回调函数
我们怎么知道动画就执行完毕了呢？
很简单 当定时器停止了。 动画就结束了
案例源码：
in运算符也是一个二元运算符，但是对运算符左右两个 *** 作数的要求比较严格。in运算符要求第1个（左边的） *** 作数必须是字符串类型或可以转换为字符串类型的其他类型，而第2个（右边的） *** 作数必须是数组或对象。只有第1个 *** 作数的值是第2个 *** 作数的属性名，才会返回true，否则返回false
案例源码：
链接： > 密码：7fv8
主要原理是利用 css 变量设置颜色，用 js 动态修改变量，使颜色变化，兼容性如下；
实现换肤之前先要了解一下伪类选择器 :root ，还有css的 var() 函数和 setProperty() 函数
:root 是一个伪类，表示文档根元素，非 IE 及 IE8 及以上浏览器都支持，在 :root 中声明相当于全局属性，只要当前页面引用了 :root 所在的文件，都可以使用css var() 函数来引用；
语法
var() 函数，可以代替元素中，任何属性中的值的任何部分； var() 函数不能作为属性名、选择器或者其他除了属性值之外的值，这样做通常会产生无效的语法或者一个没有关联到变量的值；
语法
setProperty() 方法用于设置一个新的 css 属性，同时也可以修改 css 声明块中已存在的属性，兼容性如下；
语法
如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；END
往期文章
个人主页
注解：ele要全屏的元素
退出全屏直接使用document调用exitFullscreen方法即可。
documentfullscreenElement()：获取当前全屏的元素。
注意：
1document下没有requestFullscreen
2requestFullscreen方法只能由用户触发，比如：在onload事件中不能触发
3页面跳转需先退出全屏
4进入全屏的元素，将脱离其父元素，所以可能导致某些css失效
解决方案：使用 :full-screen伪类 为元素添加全屏时的样式（使用时为了兼容注意添加-webkit、-moz或-ms前缀）
5一个元素全屏后，其子元素要再全屏，需先让该元素退出全屏
CSS的样式分为三类：
内嵌样式：是写在Tag里面的，内嵌样式只对所有的Tag有效。
内部样式：是写在HTML的里面的，内部样式只对所在的网页有效。
外部样式表：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以css为后缀的CSS文件里，然后在每个需要用到这 些样式(Styles)的网页里引用这个CSS文件。
getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式对象([object CSSStyleDeclaration])
currentStyle是IE浏览器的一个属性，返回的是CSS样式对象
element指JS获取的DOM对象
elementstyle //只能获取内嵌样式
elementcurrentStyle //IE浏览器获取非内嵌样式
windowgetComputedStyle(element,伪类) //非IE浏览器获取非内嵌样式
documentdefaultViewgetComputedStyle(element,伪类)//非IE浏览器获取非内嵌样式
注：Gecko 20 (Firefox 4 / Thunderbird 33 / SeaMonkey 21) 之前，第二个参数“伪类”是必需的（如果不是伪类，设置为null），现在可以省略这个参数。
下面的html中包含两种css样式，id为tag的div是内嵌样式，而id为test的div样式为内部样式
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="Yvette Lau">
<meta name="Keywords" content="关键字">
<meta name="Description" content="描述">
<title>Document</title>
<style>
#test{
width:500px;
height:300px;
background-color:#CCC;
float:left;
}
</style>
</head>
<body>
<div id = "test"></div>
<div id = "tag" style = "width:500px; height:300px;background-color:pink;"></div>
</body>
</html><script type = "text/javascript">
windowonload = function(){
var test = documentgetElementById("test");
var tag = documentgetElementById("tag");
//CSS样式对象:CSS2Properties{},CSSStyleDeclaration
consolelog(teststyle); //火狐返回空对象CSS2Properties{}，谷歌返回空对象CSSStyleDeclaration{}
consolelog(tagstyle); //返回CSS2Properties{width:"500px",height:"300px",background-color:"pink"}
//elementstyle获取的是内嵌式的style，如果不是内嵌式，则是一个空对象
consolelog(tagstylebackgroundColor);//pink
consolelog(tagstyle['background-color']);//pink
//获取类似background-color,border-radius,padding-left类似样式的两种写法啊
consolelog(testcurrentStyle) //火狐和谷歌为Undefined,IE返回CSS对象
consolelog(windowgetComputedStyle(test,null))//谷歌返回CSSStyleDeclaration{……} ，火狐返回CSS2Properties{……}
consolelog(windowgetComputedStyle(test))
//效果同上,但是在Gecko 20 (Firefox 4/Thunderbird 33/SeaMonkey 21) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null)
consolelog(testcurrentStylewidth);//500px(IE)
consolelog(windowgetComputedStyle(test)width); //500px;
consolelog(windowgetComputedStyle(test)['width']);//500px;
//documentdefaultViewgetComputedStyle(element,null)[attr]/windowgetComputedStyle(element,null)[attr]
}
</script>
伪类和伪元素的区别是它们是否创造了新的元素，这个新创造的元素就叫伪元素。伪元素不存在在DOM文档中，是虚拟的元素，是创建新元素，这个伪元素是某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
伪类和伪元素的区别
伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾，可以同时使用多个伪类，而只能同时使用一个伪元素，CSS3中伪类和伪元素的语法不同，伪类link，hover，伪元素before，after。
相同点都可以用来表示伪类对象，用来设置对象前的内容，before和before写法是等效的，after和after写法是等效的。不同点beforeafter是Css2的写法，beforeafter是Css3的写法，所以css2的要比css3的兼容好，beforeafter的兼容性要比beforeafter好。
在H5开发中建议使用beforeafter比较好，注意伪对象要配合content属性一起使用，伪对象不会出现在DOM中，所以不能通过js来 *** 作，仅仅是在CSS渲染层加入，伪对象的特效通常要使用hover伪类样式来激活。
JavaScript中获得css样式的值的方法：
<div style="border:solid 1px #000;border-width:10px;" id="test"></div>1元素的style（仅限于直接在元素上写style）
documentgetElementById('test')styleborderWidth2currentStyle（IE，这个可以获取不在元素的style中的样式）
documentgetElementById('test')currentStyle3getComputedStyle（低版本IE不支持，可获取伪类的样式）
getComputedStyle(documentgetElementById('test'),null)borderWidth;我觉得 用 更改类名的方法 修改样式比较好
可以不用js 做一大堆繁琐的工作 css写好样式 直接该类名就好了
添加：节点classListadd("类名")；
删除：节点classListremove("类名")；
以上就是关于前端基本功：JS（十一）动画封装(CSS样式获取、JSON遍历)全部的内容，包括:前端基本功：JS（十一）动画封装(CSS样式获取、JSON遍历)、简单的JS+CSS实现网页自定义换肤、JS实现浏览器全屏等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）