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 = ...
随机推荐
- Notepad++文件自动更新
- zeromq的安装,部署(号称最快的消息队列,消息中间件)
1:Storm作为一个实时处理的框架,产生的消息需要快速的进行处理,比如存在消息队列ZeroMQ里面. 由于消息队列ZeroMQ是C++写的,而我们的程序是运行在JVM虚拟机里面的.所以需要jzmq这 ...
- Linux 命令行敲命令 光标移动快捷键
在单词之间跳转,使用Ctrl+左右键. Ctrl+a跳到本行的行首, Ctrl+e则跳到页尾. Ctrl+u删除当前光标前面的文字 ctrl+k-删除当前光标后面的文字 Ctrl+w和Alt+d-对于 ...
- 【Android】TypedArray和obtainStyledAttributes使用
在编写Android自定义按钮示例基础上,如果要指定字体大小产生这样的效果: 其实是不需要自定义变量的,可以直接使用TextView的配置属性: <com.easymorse.textbutto ...
- net core体系-web应用程序-4net core2.0大白话带你入门-5asp.net core环境变量详解
asp.net core环境变量详解 环境变量详解 Windows操作系统的环境变量在哪设置应该都知道了. Linux(centos版本)的环境变量在/etc/profile里面进行设置.用户级的 ...
- Vue2.0学习——axios用法详解
功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 自动转换 JSON 数据 客 ...
- 01. Numpy模块
1.科学计算工具-Numpy基础数据结构 1.1.数组ndarray的属性 NumPy数组是一个多维数组对象,称为ndarray.其由两部分组成:① 实际的数据② 描述这些数据的元数据 注意数组格式, ...
- css3 webkit-box的用法
webkit-box 1.之前要实现横列的web布局,通常就是float或者display:inline-block; 但是都不能做到真正的流体布局.至少width要自己去算百分比.2.flexibl ...
- Python做性能测试-1、Locust基础篇
前言:说起性能测试,大家想到的基本上都是工具jmeter和loadrunner多少也对执行性能测试的方式有一点认识,这些工具基本都实现了请求-响应-结果统计分析这样完整的测试链路,用户方面只需组织这些 ...
- Nginx配置以及域名转发
工程中的nginx配置 #user nobody; worker_processes 24; error_log /home/xxx/opt/nginx/logs/error.log; pid /ho ...