jq样式框架包含两大部分：获取元素的样式的值，设置样式的值
来看看jq有哪些方法
看看jquery中如何获取元素的值
- css(key,value)
- height width
- innerHeight innerWidth
- outerHeight outerWidth
- offset offetParent
- position
- scollLeft scollRight scollTop scrollParent
- hide show
1、获取样式和设置样式
```
//获取所有元素集合选择器
$all:function(selector,context){
context = context || document;
return context.querySelectorAll(selector);
}
<body>
<div id="container">
<p>英雄联盟</p>
<p>梦幻西游</p>
</div>
</body>
</html>
<script src='itcast.js'></script>
```
1.1、步骤：
- 获取dom元素
- 设置style/得到style
以下测试设置值
//获取dom元素
var dom = $$.$all('p')
//测试原生
dom[0].style.color='yellow'
//封装起来
function setStyle(dom,key,value){
dom.style[key] = value;
}
setStyle(dom[0],'color','green')
setStyle(dom[0],'opacity','0.5')1.2、测试获取值
//获取样式值
console.log(dom[0].style.color)//color是通过style方式添加上去的，可以通过style.color获取
console.log(dom[0].style.background)//background是通过class方式添加上去的，获取不到
//解决方案 -- js中提供了全局的getComputedStyle函数
console.log(window.getComputedStyle(dom[0],null).color)
//IE早期浏览器不支持
//console.log(dom[0].currentStyle['color'])
//封装成一个函数
function getStyle(dom,key){
if(dom.currentStyle){
return dom.currentStyle[key];
}else{
return getComputedStyle(dom,null)[key];
}
}
//测试
console.log(getStyle(dom[0],'color'))
console.log(getStyle(dom[0],'height'))
1.3、最终版本
加入了可获取属性数字(不带单位)，同时把获取设置一起封装
//封装css框架
$.extend($,{
//样式
css:function(context, key, value){
var dom = $.isString(context)?$.$all(context) : context;
//如果是数组
if(dom.length){
//先骨架骨架 -- 如果是获取模式 -- 如果是设置模式
//如果value不为空，则表示设置
if(value){
for(var i = dom.length - 1; i >= 0; i--){
setStyle(dom[i],key, value);
}
// 如果value为空，则表示获取
}else{
return getStyle(dom[0]);
}
//如果不是数组
}else{
if(value){
setStyle(dom,key, value);
}else{
return getStyle(dom);
}
}
function getStyle(dom){
if(dom.currentStyle){
return dom.currentStyle[key];
}else{
return getComputedStyle(dom,null)[key];
}
}
function setStyle(dom,key,value){
dom.style[key] = value;
}
},
cssNum:function (context, key){
return parseFloat($.css(context, key))
}
})
2.获取和设置高度
先复习一下，jq的做法
$(document).ready(function(){
//获取
var docWidth = $(document).width();
var docHeight = $(document).height();
//移动开发可视区域
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
//设置
$("#btn1").click(function(){
$("div").height(500);
});
$("#btn2").click(function(){
$("div").height("10em");
});
$("#btn3").click(function(){
$("div").height("200pt");
});
});在自己写，先看看html和css
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
height:400px;
width:500px;
background:green;
padding:10px;
border:5px;
}
#child{
height:200px;
width:200px;
background:yellow;
padding:10px;
magin:20px;
border:5px;
}
#div3{
background:yellow;
overflow:scroll;
}
</style>
</head>
<body>
<div id="div">
<div id="child"></div>
</div>
<div id="div3">
11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
</div>
</body>
</html>在看看js
// 元素高度宽度概述
// 计算方式：clientHeight clientWidth innerWidth innerHeight
// 元素的实际高度+border，也不包含滚动条
function Width(id){
return $.$id(id).clientWidth
}
function Height(id){
return $.$id(id).clientHeight
}
// 元素的滚动高度和宽度
// 当元素出现滚动条时候，这里的高度有两种：可视区域的高度 实际高度（可视高度+不可见的高度）
// 计算方式 scrollwidth
function scrollWidth(id){
return $.$id(id).scrollWidth
}
function scrollHeight(id){
return $.$id(id).scrollHeight
}
// 元素滚动的时候 如果出现滚动条 相对于左上角的偏移量
// 计算方式 scrollTop scrollLeft
function scrollTop(id){
return $.$id(id).scrollTop
}
function scrollLeft(id){
return $.$id(id).scrollLeft
}
//获取屏幕的高度和宽度
function screenHeight(){
return window.screen.height
}
function screenWidth(){
return window.screen.width
}
//文档视口的高度和宽度
wWidth:function (){
return document.documentElement.clientWidth
},
wHeight:function (){
return document.documentElement.clientHeight
},
//文档滚动区域的整体的高和宽
wScrollHeight:function () {
return document.body.scrollHeight
},
wScrollWidth:function () {
return document.body.scrollWidth
},
//获取滚动条相对于其顶部的偏移
wScrollTop:function () {
var scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;
return scrollTop
},
//获取滚动条相对于其左边的偏移
wScrollLeft:function () {
var scrollLeft = document.body.scrollLeft || (document.documentElement && document.documentElement.scrollLeft);
return scrollLeft
}
3.获取position
jq的做法
获取position
$(document).ready(function(){
$(".children").each(function(){
var text;
text="left:"+$(this).position().left;
text+="top:"+$(this).position().top;
$(this).text(text);
})
})设置position
offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。
offset() 则是该元素距离文档顶部的的距离。这里一定要注意是文档的顶部的距离，而不是说浏览器顶部的距离。
返回第一个匹配元素的偏移坐标。
该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
var newPos=new Object();
newPos.left="0";
newPos.top="100";
$(document).ready(function(){
$("button").click(function(){
$("p").offset(newPos);
});
});原生
两种坐标：
当我们计算一个DOM元素位置也就是坐标的时候，会涉及到两种坐标系，文档坐标和视口坐标。
文档坐标：我们经常用到的document就是整个页面部分，而不仅仅是窗口可见部分，还包括因为窗口大小限制而出现滚动条的部分，它的左上角就是我们所谓相对于文档坐标的原点。
视口坐标：视口是显示文档内容的浏览器的一部分，它不包括浏览器外壳（菜单，工具栏，状态栏等），也就是当前窗口显示页面部分，不包括滚动条。
两个概念：绝对定位 相对定位
元素的相对位置：每个元素都有offsetTop和offsetLeft属性，
表示该元素的左上角与父容器（offsetParent对象）左上角的距离
function offset(id){
//获取元素的坐标值
function offsetLeft(dom){
return dom.offsetLeft
}
function offsetTop(dom){
return dom.offsetTop
}
var dom = $$.$id(id);
return {top:offsetTop(dom),left:offsetLeft(dom)}
}元素的绝对位置：指该元素的左上角相对于整张网页左上角的坐标。这个绝对位置要通过计算才能得到。
首先，每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。
所以，只需要将这两个值进行累加，就可以得到该元素的绝对坐标。
实现原理
在阅读javascript高级程序设计第三版DOM部分时，
了解到要获取某个元素在页面上的偏移量，
需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，一直循环直至根元素。
所以，要得到元素到文档区域的坐标位置，
只需通过while循环不断获取offsetParent的offsetLeft/offsetTop直到offsetParent = null为止。
function absoluteOffset(id){
function absolateLeft(id){
var dom = $$.$id(id)
var left = offset(id).left;
var parent = dom.offsetParent;
while (parent !== null){
left += parent.offsetLeft;
parent = parent.offsetParent;
}
return left;
}
function absolateTop(id){
var dom = $$.$id(id)
var top = offset(id).top;
var parent = dom.offsetParent;
while (parent !== null){
top += parent.offsetTop;
parent = parent.offsetParent;
}
return top;
}
return {top:absolateTop(id),left:absolateLeft(id)}
}
显示和隐藏
//显示
show:function (content){
var doms = $$.$all(content)
for(var i= 0,len=doms.length;i<len;i++){
$$.css(doms[i], 'display', 'block');
}
},
//隐藏和显示元素
hide:function (content){
var doms = $$.$all(content)
for(var i= 0,len=doms.length;i<len;i++){
$$.css(doms[i], 'display', 'none');
}
},
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
