DOM-6 【兼容】读写样式属性、操作伪元素、运动元素初探
规范
<style type="text/css"></style>
<script type="text/javascript"></script>
读写样式属性
.style
是访问不到css样式表的,只能访问到行内/内联的属性,当未设置行内属性时,结果为空字符串
- 设置时,对复合值需要拆解赋值,不拆解效率更低
oDiv.style.weight='200px';
oDiv.style.border='5px solid #000';
// 更合适的写法如下,拆解
oDiv.style.borderWidth='5px';
oDiv.style.borderStyle='solid';
oDiv.style.borderColor='#000';
- 设置float要写成cssFloat(虽然设置float也有效果但是不规范,float是css中的保留字,也有浮点的含义)
查看元素css属性
1. 元素.style
对于不同的盒子模型是什么
- 当给元素设置了行内样式时
- 当元素未设置内联样式时
2. window.getComputedStyle(elem,null)
- 查看计算样式
- 返回值是类数组
- 属性是只读的
- 是绝对值(非数学意义上的绝对值):em、rem转换为px,十六进制转换为rgb
- IE8及以下不支持
Failed to set the ‘background’ property on ‘CSSStyleDeclaration’: These styles are computed, and therefore the ‘background’ property is read-only.
at HTMLDivElement.oDiv.onclick
获取元素行内、css样式表
.style和getComputedStyle的区别
IE8支持
elem.currentStyle
该方法获取到的height是否是盒子的实际高度,是由盒子模型决定的
【兼容】
function getStyles(elem, prop) {if (window.getComputedStyle) {if (prop) {return window.getComputedStyle(elem, null)[prop];} else {return window.getComputedStyle(elem, null);}} else {if (prop) {return elem.currentStyle[prop];} else {return elem.currentStyle;}}
}
3.offsetWidth/offsetHeight
- 访问元素的实际宽高
- 包含元素的padding、border(box-sizing为content-box时)
- 会在元素渲染后访问(即使设置的是css样式表也能)
- box-sizing为content-box时,长大的速度更快,因为始终获得都是真实宽高,起始的基数不一样
- 在js运动中的问题,如果设置的是css样式表
box-sizing为content-box时
- 使用
box-sizing:border-box;
,初始的盒子变小了
box-sizing为content-box时
操作伪元素
- 操作伪元素最好的方法就是使用类名控制
- window.getComputedStyle(elem,null)第二个参数传值可以获取after元素的只读属性
下拉选组件动画
- 要点,每次触发时需要先清空定时器,否则出现抖动(当mouseenter时未完全展开就mouseleave,enter的定时器还在执行,就开始了leave的定时器)
DOM-6 【兼容】读写样式属性、操作伪元素、运动元素初探相关推荐
- 【网页制作】CSS尺寸样式属性
CSS尺寸样式属性作用:给html元素设置高度和宽度. 注意:只有块级元素才可以设置宽度和高度. 属性名称 作用 单位/值 height 设置元素的高度 length:使用px表示高度 auto:自动 ...
- transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段
transitionend过渡监听事件: 过渡监听事件transitionend指的是CSS3中过渡效果执行一次后触发事件处理函数,如下案例: <!DOCTYPE html><htm ...
- 浏览器兼容--条件样式,选择符前缀,样式属性前缀
浏览器兼容--条件样式,选择符前缀,样式属性前缀 2012-12-05 09:20 by greenal, 1570 阅读, 0 评论, 收藏, 编辑 原文地址-- http://www.w3cplu ...
- 浏览器兼容--条件样式,选择符前缀,样式属性前缀(转)
浏览器兼容--条件样式,选择符前缀,样式属性前缀 2012-12-05 09:20 by greenal, 1570 阅读, 0 评论, 收藏, 编辑 原文地址-- http://www.w3cplu ...
- 前端JavaScript DOM BOM 自学复盘 D1(DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数)
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
- JS中的DOM操作属性、DOM创建、DOM增加、DOM修改、DOM删除以及DOM获取非行间样式
当网页被加载时,浏览器会创建页面的文档对象模型DOM(Document Object Model),在DOM中,每个东西都是节点. DOM四大操作:查找.更新.添加.删除 通过DOM,JavaScri ...
- JavaScript文档DOM对象处理HTML→document属性方法、write、getElementBy**、getsetAttribute、节点操作方法、innerHTML、操作CSS样式属性
document文档对象 document.write getElementById()ID获取元素 getElementsByName()名字获取元素 getElementsByTagName()标 ...
- html DOM操作表格及样式
一 操作表格 // <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; 1 // 使用DOM来创建表格; 2 var t ...
- css鼠标悬停样式_利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标
原文转载自「刘悦的技术博客」 ( 利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标) ) 现而今,我们纵向的回顾整个大前端的历史,不难发现,人们对前端的审美要求越来越高,越来越严苛,与 ...
最新文章
- WinDbg用法详解
- 如何从用户体验的角度去做一个网站的页面设计
- oracle服务端用sql查看连接到数据库的IP
- #135. 二维树状数组 3:区间修改,区间查询
- 计算机科学学什么语言,在计算机科学中,什么不是正式语言? [关闭]
- 一文带你了解Java Agent
- concat合并的数组会有顺序么_超全的JS常用数组方法整理
- linux命令里的xz是干嘛的,linux xz命令详解
- java异常代码_Java异常(示例代码)
- 阿里巴巴分布式消息系统的演进之路
- 网络流24题 洛谷 2763 试题库问题
- Unity学习资料收集
- 配置JDK环境变量详细步骤
- 在java中class是什么意思_java 中Class? 中的?代表什么意思?
- 数据结构——竞选海报
- python读取word内容复制粘贴,Python读取word文本操作详解
- javaweb JSP JAVA 电影院在线订票系统(ssm电影购票系统 电影售票 电影票预订系统)(支持在线选座)
- 简报 | 任正非点评Libra背后:华为已抢滩区块链4年,5G或成最大杀手锏
- python光棍节快乐_2020年祝光棍节快乐的祝福语18条
- java处理word插入数据转PDF及下载PDF
热门文章
- 停车场管理系统代码_jsp19109商场商铺停车场服务系统-SSM-Mysql
- 一款已上市MMO手游地图同步方案总结
- 为此计算机所有用户安装加载项,安装Office 2013后,无法在计算机上安装Outlook加载项...
- 对js数组去重的研究
- MySQL Hardware--FIO压测
- Luogu3350 ZJOI2016 旅行者 最短路、分治
- LeetCode-50-Pow(x, n)
- zbb20171215 git 版本回退
- 第二周进度及工作量统计
- 宏与内联(inline)的区别(转载)