元素的计算样式
ele.style获取或设置元素的行内样式
getComputedStyle:当前元素计算后的样式(看权重，获取到的是最终作用在元素身上的样式)
在ie下有专门的属性来获取元素的计算后样式ele.currentStyle
封装一个设置或者获取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
}
瀑布流案例+图片懒加载
[
{"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"}
]
<!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>
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();
}
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
}
})()
发表评论
还没有评论，快来抢沙发吧！