写点什么

js 脚本化 css

  • 2024-07-01
    福建
  • 本文字数:3362 字

    阅读完需:约 11 分钟

脚本化 CSS


我们刚讲过如何获取和设置行内样式的值,但是我们开发不会所有样式都写在行内,同时 js 没法获取内嵌样式表和外部样式表中的值.


事实上 DOM 提供了可靠的 API,得到计算后的样式。


1. 获取计算样式表


只读,不可写获取的值是计算后的绝对值,不是相对值


window.getComputedStyle(ele,null).attr IE8 以上 ele.currentStyle IE8 及其以下


例子:

window.getComputedStyle(ele).attr// 当然window是可以省略的getComputedStyle(ele).attr
复制代码


好用的东西,一定不兼容。所以 IE6、7、8 不兼容


附加在元素身上的 currentStyle 属性,它表现和 style 点语法一样,使用驼峰式访问


例子

oDiv.currentStyle.width
复制代码


之前讲过,点操作符必须符合标识符的规范,所以使用点操作符获取有连字符的属性要写成驼峰式

getComputedStyle(oDiv).backgroundColor;oDiv.currentStyle.backgroundColor;
复制代码


中括号操作符,因为中括号内写字符串,所以不用遵循标识符规范,就可以保留连字符的写法

getComputedStyle(oDiv)['background-color'];oDiv.currentStyle['background-color'];
复制代码


颜色值在高级浏览器中是 rgb()格式,低级浏览器中就是原样输出。


示例:

封装 getStyle(dom,attr)兼容性


实际上,老司机都不这么做。我们不关心你的版本是什么,我只关心你的能力。

function getStyle(ele,attr){	if(window.getComputedStyle){		return getComputedStyle(ele)[attr];	}else{		return ele.currentStyle[attr];	}} function getStyle(dom,attr){	if(dom.currentStyle){  // IE8 及其一下		return dom.currentStyle[attr]	}else{		return getComputedStyle(dom,null)[attr]	}}
复制代码


现在我们要在一个轮子,就是封装一个函数,这个函数接收两个参数,第一个是对象,第二个是属性名。

getStyle(obj,”padding-left”);getStyle(obj,”paddingLeft”);
复制代码


这个函数返回的是这个属性值的计算后的样式。更牛逼的是,我们无论用户输入的是驼峰还是非驼峰,都让这个函数鲁棒。


2. 操作元素样式


我们知道前面学过了如果设置样式通过行内 style 来设置元素样式,


那么我们就可以通过获取计算样式值,然后修改

var oBox = document.getElementById('box');var wid = parseInt(getStyle(oBox,'width'));oBox.onclick = function(){	wid += 20;	console.log(wid);	oBox.style.width = wid + 'px';}
复制代码


3. 快捷位置和尺寸


DOM 已经提供给我们计算后的样式,但是还觉得不方便,所以 DOM 又提供给我们一些 API:


获取元素的显示尺寸(数字类型的值)

ele.offsetWidth width+左右 padding+左右 borderele.offsetHeight height+上下 padding+上下 borderele.offsetLeft 水平距离 (常用)ele.offsetTop 竖直距离 (常用)ele.clientWidth width+左右 padding (常用)ele.clientHeight height+上下 padding (常用)dom.clientLeft 上边框的 width (可不记)dom.clientTop 左边框的 width (可不记)


3.1. offsetWidth 和 offsetHeight


全线兼容,是自己的属性,和别的盒子无关。


一个盒子的 offsetWidth 值就是自己的 width+左右 padding+左右 border 的宽度(说白就是盒子的大小)

总结一下,全线兼容。


3.2. offsetLeft 属性和 offsetTop


这两个属性的兼容性非常差,不要着急,我们慢慢来看。


IE9、IE9+、Chrome 等高级浏览器:


一个元素的 offsetLeft 值,就是这个元素左边框外,到自己的 offsetParent 对象的左边框内的距离

每一个元素,天生都有一个属性,叫做 offsetParent


就是自己祖先元素中,离自己最近的已经定位的元素,如果自己的祖先元素中,没有任何盒子进行了定位,那么 offsetParent 对象就是 body。

op.offsetParent;  // 查找离自己最近的定位父级
复制代码


无论这个盒子自己是否定位,自己的 offsetParent 就是按照上述方法寻找。


IE6、IE7:


IE6、7 的 offsetParent 对象是谁,和高级浏览器有非常大的不同。


情形 1:自己如果没有定位属性,那么自己的 offsetParent 对象就是自己的祖先元素中离自己最近的有 width 或者有 height 的元素:

<div class="box1">	<div class="box2">  → 你好,我有宽度 , offsetParent		<div class="box3"> → 你好,我没有宽高 			<p></p>   → 你好,我没有定位		</div>	</div></div>
复制代码


情形 2:自己如果有定位属性


那么自己的 offsetParent 就是自己祖先元素中离自己最近的有定位的元素。

<div class="box1">	<div class="box2">		<div class="box3"> → 你好,我没有宽高,有定位  , offsetParent			<p></p>   → 你好,我没有定位		</div>	</div></div>
复制代码


数值就是自己的左外边框到 offsetParent 对象的左内边框的值。


IE8:


IE8 的 offsetParent 是谁呢?和高级浏览器一致:


无论自己是否定位,自己的 offsetParent 就是自己祖先元素中,离自己最近的已经定位的元素。


这一点,没有任何兼容问题!


兼容性解决办法,不是能力检测,也不是版本检测,而是善用这个属性,要确保属性的使用条件:


这样的话,所有浏览器的值都是一样的,offsetLeft、offsetTop 值是 number 类型的,可以直接参与运算,不需要 parseInt()


3.3. clientWidth 和 clientHeight


clientWidth 就是自己的 width+padding 的值。 也就是说,比 offsetWidth 少了 border。


如果盒子没有高度,用文字撑的,IE6 clientHeight 是 0,其他浏览器都是数值


以上 6 个属性要铭记于心,就 offsetLeft、offsetTop 比较闹腾,但是合理使用,也没兼容问题了


3.4. clientLeft 和 clientTop


这两个属性没有太大的意义就是上边框和左边看的宽度而已


4. 获取元素的有定位属性的父级


ele.offsetParent 如果没有定位父节点,则返回 body


封装 getElementPosition 函数,获取元素相对于文档的坐标

function getElePos(dom){  // 获取元素相对于文档的坐标	var x = dom.offsetLeft;	var y = dom.offsetTop;	var parent = dom.offsetParent;	while(parent !== null){		x += parent.offsetLeft;		y += parent.offsetTop;		parent = parent.offsetParent;	} 	return {		x: x,		y: y	}}
复制代码


5. 获取元素的滚动值


5.1 获取滚动元素的宽高


当元素实际内容超过设置的内容时

dom.scrollWidth ==> 元素实际内容的 widthdom.scrollHeight ==> 元素实际内容的 height


5.2 获取元素的滚动距离(数字类型的值)

dom.scrollLeft 滚动的水平距离 dom.scrollTop 滚动的竖直距离


5.3 滚动距离的兼容写法


  • 获取滚动条的滚动距离 IE8 以上

window.pageXOffset 页面滚动的水平距离 window.pageYOffset 页面滚动的竖直距离

  • 获取滚动条的滚动距离 IE8 及其以下

document.documentElement.scrollLeft IE7,8document.documentElement.scrollTop IE7,8document.body.scrollLeftdocument.body.scrollTop 在 IE8 以上兼容性比较混乱,在使用时两个值相加,因为这两对值不能同时存在


封装 getScrollOffset 兼容性函数

function getScrollOffset(){	if(window.pageYOffset){		return {			x: window.pageXOffset,			y: window.pageYOffset		}	}else{		return {			x: document.documentElement.scrollLeft + document.body.scrollLeft,			y: document.documentElement.scrollTop + document.body.scrollTop;		}	}}
复制代码


6. 获取浏览器窗口的尺寸


IE8 以上

window.innerWidth 窗口的宽度(包含滚动条)window.innerHeight 窗口的高度(包含滚动条)


IE8 及其以下

document.documentElement.clientWidth 标准模式下document.documentElement.clientHeight (在Chrome,Firefox,IE7,IE8不包含滚动条,在IE8以上包含滚动条) document.body.clientWidth 怪异模式下document.body.clientWidth
复制代码


检测浏览器是不是在怪异模式下

dowument.compatMode === 'BackCompat'
复制代码


封装 getViewportOffset 兼容性函数

function getViewportOffset(){	if(window.innerWidth){  		return {			x: window.innerWidth,			y: window.innerHeight		}	}else{		if( document.compatMode === 'BackCompat'){			return {				x: document.body.clientWidth,				y: document.body.clientHeight			}		}else{			return {				x: document.documentElement.clientWidth,				y: document.documentElement.clientHeight			}		}	}}
复制代码


7. 设置滚动条的滚动距离


浏览器页面滚动

window.scrollTo(x,y) 让滚动条滚动到指定位置 window.scrollBy(x,y) 让滚动条滚动指定距离
复制代码


页面元素滚动

ele.scrollTo(x,y) ele.scrollBy(x,y)
复制代码


文章转载自:二价亚铁

原文链接:https://www.cnblogs.com/xw-01/p/18266103

体验地址:http://www.jnpfsoft.com/?from=infoq

用户头像

还未添加个人签名 2023-06-19 加入

还未添加个人简介

评论

发布
暂无评论
js脚本化css_CSS_快乐非自愿限量之名_InfoQ写作社区