11-13 js操作css样式
1.Js操作css样式
Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值。这种写法会给标签带来大量的style属性,跟实际项目是不符。
我们没有让css和html分离。
所以如果是为了获取css样式
window.getComputedStyle() 获取经过计算机计算的所有属性就是只要渲染出来的都是经过计算的。
getComputedStyle()第一个参数是当前元素,第二个一般我们写null,并且这个方法是只读,
Ie6-8 不支持这个用法,ie的是用currentStyle 
2.try{}catch(error){}不报错执行try里面的代码块,报错执行catch里面的代码块。前提条件是报错,如果不是报错不能使用
var csss;
try{
csss=window.getComputedStyle(aa,null)
}catch(e){
csss=aa.currentStyle
}
console.log(csss)
总结:
Js解决兼容的方法
- ||:Var dd=document.documentElement.clientWidth||document.body.clientWidth
2.if()else{}
if(window.getComputedStyle){
csss=window.getComputedStyle(aa,null)
}else{
csss=aa.currentStyle
}
console.log(csss)
3.try{} catch(err){}:必须在报错的条件下,和if else比较性能上比较差,不在万不得以的情况下不使用
只读 可写
只读: 只能获取不能修改
可写:可以修改的
Null和undefined的区别:
Null和undefined都表示没有值
Null 是这个东西是天生存在的但是没给值。
如果我们需要清除浏览器变量的内存需要赋值null
比如:
var aa=document.getElementById("aa")
console.log(aa.parentNode.parentNode.parentNode.parentNode) null
undefined 这个东西压根就不存在的是人为定义的并且没赋值。
- var a;undefined
- Div.aa undefined
元素节点的树状图
Document>documentElement>body>tagName
offsetLeft/offsetTop 结合运动
滚动轮播
11-13 js操作css样式的更多相关文章
- js操作css样式、js的兼容问题
一.js操作css样式 div . style . width="200px" 在div标签内我们添加了一个style属性,并设定width值.这种写法会给标签带来大量的style ...
- js操作css样式,null和undefined的区别?
1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...
- JS操作CSS样式
一.样式表(css) 使用样式表可以更好的显示WEB文档,也可以结合javascript从而实现很好的控制样式表. 样式(css)与内容(html): HTML是处理文档结构的,HTML可以实现如何把 ...
- JS操作css样式用法
//html <div id="div1" style="background:red;"> 修改背景颜色 </div> <but ...
- js中css样式
1.js操作css样式 例如 div . style . width=“100px”. 就是在div标签内我们添加一个style属性,并设定了width值,这种写法会给标签带来大量的style属性,跟 ...
- jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息
jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...
- js改变css样式
CreateTime--2017年10月31日15:14:12 Author:Marydon js改变css样式 1.js改变单个css样式 HTML部分 <div id="tes ...
- 前端(十二)—— JavaScript基础操作:if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式
JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...
- js设置css样式.
在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...
随机推荐
- Git基础(一) 创建项目仓库
一.取得Git项目仓库的两种方法: 在现有目录中初始化仓库 git init 如果是在一个已经存在文件的文件夹(而不是空文件夹)中初始化Git仓库来进行版本控制的话,应该跟踪这些文件并提交,通过git ...
- POJ 1273 Drainage Ditches【最大流模版】
题意:现在有m个池塘(从1到m开始编号,1为源点,m为汇点),及n条有向水渠,给出这n条水渠所连接的点和所能流过的最大流量,求从源点到汇点能流过的最大流量 Dinic #include<iost ...
- Windows无法自动将IP协议堆栈绑定到网络适配器 的解决办法
实验室的台式机在升级驱动后上不了网了,有线网卡驱动卸载后重装了,还是不行,通过Windows诊断发现“Windows 无法自动将 IP 协议堆栈绑定到网络适配器的解决办法”. 解决办法: 打开“控制面 ...
- NEST 中的距离单位
Distance units Version: 5.x 英文原文地址:Distance units 当我们需要指定距离时(地理位置查询),可以使用一个双精度的数字来表示,它的默认单位是米(meters ...
- mysql解决数据库死锁问题
为了保证数据的正确性,对数据库进行操作的时候都会进行上锁,也就是进行修改数据的时候同一时间只能有一个进程,当这个进程处理完了,释放锁了,其他进程才可以进行操作! 总是会碰见一些意外情况,导致数据库死锁 ...
- web发展阶段简介
web1.0.web2.0和web3.0的区别前言: 其实并没有什么所谓的2.0.3.0,因为你没法准确的界定它是什么样的应用,也没法界定它是什么时候开始的,什么时候结束,它只是互联网本身发展的一种 ...
- SSH框架学习------struts2前后台传值(二)
struts2的Action类一般都会继承(extends)ActionSupport类(Action类,即实现action的类)1.前传后:jsp里<input type="text ...
- Django之url路由
Django之url路由 url路由介绍 url路由是关联url及其视图函数关系的过程. 作用就是使views里面处理数据的函数与请求的url建立映射关系 url路由配置 Django的url路由配置 ...
- Shell学习之条件测试(四)
Shell学习之条件测试 目录 逻辑测试 文件测试 数值比较 字符串比较 逻辑测试 格式: [ 表达式 ] 操作符 [ 表达式2 ] …… 命令1 操作符 命令2 …… 常用的操作符 ( 注意:-a和 ...
- SpringBoot学习历程
新年新气象,更新了一下本人所有写的关于SpringBoot的文章目录,感谢大家长期以来的支持,在接下来的日子还会不定期的进行更新. 入门 使用IntelliJ Idea新建SpringBoot项目 S ...