元素的计算样式
ele.style获取或设置元素的行内样式
- 获取的值都是
字符串类型的- 还有就是样式的名字必须是驼峰命名法
getComputedStyle:当前元素计算后的样式(看权重，获取到的是最终作用在元素身上的样式)
只能获取,不能设置- 它是window身上的一个方法
- 用法:getComputedStyle(ele,"伪类");
返回值是一个对象，对象里是所有计算后元素身上的样式getComputedStyle(box).width获取box的width,也是字符串- 在IE6~IE8是不能用的
- 还有就是样式的名字必须是驼峰命名法
- 复合样式获取到的是复合属性
在ie下有专门的属性来获取元素的计算后样式ele.currentStyle
- ele.currentStyle,它是一个属性，里面存储的是当前元素所有的计算过后的样式
- 用法
box.currentStyle.width获取box里面的widthie专属的，谷歌不识别
封装一个设置或者获取css样式的方法
//封装设置或者获取css样式的一些方法
//查找值
function getCss(ele, attr) {
var value = null;
if ("getComputedStyle" in window) {
value = getComputedStyle(ele)[attr];
} else {
value = ele.currentStyle[attr];
}
//为了方便运算我们将几个常用的改成数字，因为本来的是字符串，我们把它的单位也去掉
var reg = /^(width|height|padding|magrin|opacity|left|top|left)$/;
if (reg.test(attr)) {
value = parseFloat(value);
}
console.log(value);
return value;
}
//赋值
function setCss(ele, attr, value) {
/*
1.先确定当前的样式需不需要单位
2.再确定当前样式,用户给有没有加单位
*/
// console.log(ele,attr,value)
var reg = /^(width|height|padding|magrin|left|top|left)$/;
if (reg.test(attr)) {
var number = parseFloat(value); //提取数字
ele.style[attr] = number + "px";
}
ele.style[attr] = value;
}
//多个值赋值
function setGroupCss(ele, obj) {
for (var key in obj) {
if (!obj.hasOwnProperty(key)) {
return
}
setCss(ele, key, obj[key])
}
}
//根据值判断意图
function css() {
let [ele, attr, value] = arguments;
if (arguments.length == 2) {
if (typeof attr == "object") {
setGroupCss(ele, attr);
} else {
getCss(ele, attr);
}
} else if (arguments.length == 3) {
setCss(ele, attr, value);
} else {
return;
}
}
css(box, "width");
css(box, {
"width": 100,
"height": 300,
"background": "red"
})
for in循环可以便利可枚举的属性
当前对象的私有属性和对象原型上的自己添加的属性都是可枚举的属性
var obj={
a:1,
b:2
}
Object.prototype.c=3;
for(var key in obj){
console.log(key);//a b c
}
瀑布流案例+图片懒加载
json的名字data.txt
[
{"src": "./img/1.jpg","title":"人生不止有代码 诗和远方","height": "200px"},
{"src": "./img/2.jpg","title":"人生不止有代码 诗和远方","height": "220px"},
{"src": "./img/3.jpg","title":"人生不止有代码 诗和远方","height": "250px"},
{"src": "./img/4.jpg","title":"人生不止有代码 诗和远方","height": "300px"},
{"src": "./img/5.jpg","title":"人生不止有代码 诗和远方","height": "170px"},
{"src": "./img/6.jpg","title":"人生不止有代码 诗和远方","height": "280px"},
{"src": "./img/7.jpg","title":"人生不止有代码 诗和远方","height": "160px"},
{"src": "./img/8.jpg","title":"人生不止有代码 诗和远方","height": "230px"},
{"src": "./img/3.jpg","title":"人生不止有代码 诗和远方","height": "230px"},
{"src": "./img/4.jpg","title":"人生不止有代码 诗和远方","height": "230px"}
]
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 1000px;
height: 200px;
/* background:red; */
margin:0 auto;
display:flex;
align-items: flex-start;
}
ul{
list-style: none;
margin:0 0.5%;
/* background:black; */
}
div li{
width: 200px;
margin-bottom: 10px;
}
div li img{
width: 100%;
display: block;
background:url(img/timg.gif) no-repeat center center;
}
</style>
</head>
<body>
<div>
<ul>
</ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
</html>
<script src="utils.js"></script>
<script src="瀑布流.js"></script>
js部分
let uls = document.getElementsByTagName('ul');
getData();
function getData() {
let data;
let xhr = new XMLHttpRequest;
xhr.open("get", "data.txt", false);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)) {
data = JSON.parse(xhr.responseText)
bindHTML(data);
}
}
xhr.send();
}
function bindHTML(data) {
for (var i = 0; i < 20; i++) {
uls = Array.from(uls);
let index = Math.round(Math.random() * 9);
let curImg = data[index];
let li = document.createElement("li");
let img = document.createElement("img");
let p = document.createElement("p");
p.innerText = curImg.title;
img.setAttribute("true-src", curImg.src);
img.style.height = curImg.height;
img.className = "bg";
li.appendChild(img);
li.appendChild(p);
uls.sort(function (a, b) {
return a.scrollHeight - b.scrollHeight;
})
uls[0].appendChild(li);
}
}
//循环执行appearImg
let imgs = document.getElementsByClassName("bg");
function delay() {
for (var i = 0; i < imgs.length; i++) {
appearImg(imgs[i]);
}
}
delay();
//图片懒加载
function appearImg(img) {
let winT = utils.win("scrollTop");
let winH = utils.win("clientHeight");
let imgT=utils.offset(img).top;
let imgH=img.offsetHeight;
if(winT+winH>=imgH+imgT){
let trueSrc=img.getAttribute("true-src");
let newImg=new Image;
newImg.src=trueSrc;
newImg.onload=function(){
img.src=trueSrc;
}
}
}
//检测是否到达底部
function testbot(){
let winH=utils.win("clientHeight");
let winT=utils.win("scrollTop");
let bodyH=utils.win("scrollHeight");
if(winH+winT>=bodyH){
getData();
}
}
window.onscroll = function () {
delay();
testbot();
}
utils.js
let utils = (function () {
function offset(curEle) {
let l = curEle.offsetLeft;
let t = curEle.offsetTop;
let parent = curEle.offsetParent;
while (parent !== document.body) {
l += parent.clientLeft + parent.offsetLeft;
t += parent.clientTop + parent.offsetTop;
parent = parent.offsetParent;
}
return {
left: l,
top: t
}
}
function getCss(curEle, attr) {
let val = null;
if ('getComputedStyle' in window) {
val = getComputedStyle(curEle)[attr];
} else {
val = curEle.currentStyle[attr];
}
let reg = /^(width|height|padding|margin|left|right|top|bottom|fontSize|opacity)$/;
if (reg.test(attr)) {
val = parseFloat(val);
}
return val;
}
function setCss(curEle, attr, value) {
let reg = /^(width|height|padding|margin|left|right|top|bottom|fontSize)$/;
if (reg.test(attr)) {
if (typeof value === 'number') {
value = value + 'px';
}
}
curEle.style[attr] = value;
}
function setGroupCss(curEle, obj) {
// 对象有几个键值对就调用几次setCss方法，
for (var key in obj) {
setCss(curEle, key, obj[key])
}
}
function css(){
let [curEle,attr,value] = arguments;
// 如果传参的个数是2，那就说明不是获取样式就是批量设置样式
if(arguments.length === 2){
// 如果第二个参的数据类型是字符串，那就是获取样式
if(typeof attr === 'string'){
// 如果第二个参数是字符串，说明是获取样式
return getCss(curEle,attr)
}
else {
setGroupCss(curEle,attr)
}
}
// 如果传递的参数是3个，那就是单个设置样式
else if(arguments.length === 3){
setCss(curEle,attr,value)
}
}
function win(attr,value){
if(value === undefined){
return document.documentElement[attr] || document.body[attr]
}
document.documentElement[attr] = value;
document.body[attr] = value;
}
function toArray(likeAry){
let ary = [];
try{
ary = Array.prototype.slice.call(likeAry);
}catch(e){
for (var i = 0; i < likeAry.length; i++) {
ary.push(likeAry[i])
}
}
return ary
}
return {
offset,
getCss,
setCss,
setGroupCss,
css,
win,
toArray
}
})()
