JavaScript获取、修改CSS样式合辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box{
height: 200px;
width: 200px;
color: white;
background-color: orange;
}
</style>
</head>
<body>
<div style="text-align:center;" id="box">
<span style="font-size:20px;" id="txt">测试样例哈</span>
</div>
<script>
var box = document.getElementById("box");
var txt = document.getElementById("txt");
//1 .style.property 仅能获取内联样式 但可以修改样式
console.log(box.style.textAlign);//center
console.log(box.style.color);//空白
// box.style.color = "black";//√
//不可加！important //2 .style.cssText
console.log(box.style.cssText);//text-align:center, 返回
// txt.style.cssText = "color:red;";//注意，会覆盖之前的样式，包括在这里没有写到的，相当于清除了原本元素的样式
//但是继承而来的样式不会被清除,如这里继承自box的居中对齐
//可加！important，如用来覆盖继承的属性 //3 .style.setProperty
txt.style.setProperty("font-size","30px");//√
//仅可用于部分常用属性 //4 document.defaultView(window).getComputedStyle
//IE则是currentStyle[attr]
var declaration = document.defaultView.getComputedStyle(box,null);
var detailStyle = document.defaultView.getComputedStyle(box,null).height;
// var declaration = document.defaultView.getComputedStyle(box,null)[height];//同理
var windowDeclaration = window.getComputedStyle(box,null);
console.log(declaration,windowDeclaration,detailStyle); //4.sp 封装一个具有兼容性的属性查阅函数
function styleCheck (element,prop,state){
if(document.defaultView.getComputedStyle(element,state)){
result = document.defaultView.getComputedStyle(element,state)[prop];//不能.prop哈，记得
}else{
result = element.currentStyle.prop;
}
console.log("The value of property"+ prop + " is" + " " + result + ".");
return result;
}
styleCheck(box,"height"); //5. 对样式表下手 insertRule 与 addRule
// var changedStyleSheet = document.styleSheet[0].insertRule("#box","height","400px"); 插入新规则
</script>
</body>
</html>
JavaScript获取、修改CSS样式合辑的更多相关文章
- javascript 动态修改css样式方法汇总(四种方法)
在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. ...
- JavaScript访问修改css样式表
1.访问元素中style属性的css样式 可以根据属性的ID或name标签利用dom操作直接访问到内部的css样式,直接使用style对象访问 <div id="myid" ...
- 获取 修改 CSS 样式
内联(style里的)样式 element.style.color element.style.getPropertyValue("color") 非内联样式 window.g ...
- javascript 动态修改css样式
方法一:改变外联css文件,这里不讲这个. 方法二:通过改变claaName来改变样式,语法: obj.className = "style2"; //或者 obj.setAttr ...
- JS笔记一：动态修改css样式
---恢复内容开始--- 最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解. 一.通过Javasript修改图片大小 通过函数来传递图片id,height,width,使用doc ...
- （转载）记录函数 getStyle() 获取元素 CSS 样式
设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...
- ASP.NET中直接用C# 动态修改CSS样式
ASP.NET中直接用C# 动态修改CSS样式 wonsoft (wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个B ...
- js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- 【JS新手教程】JS修改css样式的几种方法
本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...
随机推荐
- 在电脑中配置SQLServer数据源
要想其他软件(R.python等)能连接SQLServer数据库,必须在这些软件所在点电脑下配置相应的数据源(ODBC).我的电脑是在Windows下的,配置步骤如下: 1.控制面板-----> ...
- design
type Config struct { Item lock } func (*Config) getItem(){ } func (*Config) SetItem(){ } channel : - ...
- 官网下载MySQL最新版本的安装包
下载地址:http://www.mysql.com/downloads/ 1.选择下载社区版本 MySQL Community Edition (GPL)Community (GPL) Downloa ...
- Ajax之Json对象序列化传参
前端部分:传入参数 "groupObject" : jsonString //对象序列化传参 var projectGroup = {}; projectGroup["i ...
- cocos2dx解决中文乱码方法
使用plist文件,优点方便做多国语言支持~也不用去做编码转换 1.Resource目录下新建text.plist文件,内容格式如下 <?xml version="1.0" ...
- 01bootstrap_基本结构和布局
01bootstrap_基本结构 学习bootstrap需要下载必要的文件:www.bootcss.com 基本结构 container page-header 布局 1.响应式布局:containe ...
- hive数据导出到本地目录 抛异常
经过反复试验,最终重启hdfs和hive解决问题 hive> insert overwrite local directory '/Users/wooluwalker/Desktop/' sel ...
- hibernate---级联保存、级联删除
直接上菜: dept.hbm.xml:关键点标蓝色这部分,inverse表示放弃维护外键关系,cascade就不用说了 <hibernate-mapping package="com. ...
- Python服务Dokcer化并k8s部署实例
这篇文章记录了我试验将一个基于python的服务docker化并k8s部署的过程. 服务介绍Docker化设计业务代码改造创建docker镜像K8S部署设计yaml文件运行服务介绍这是一个用 pyth ...
- 【DB2】SQL1585N 由于没有具有兼容页面大小的可用系统临时表空间，因此无法创建临时表。SQLSTATE=54048
自己写了一段SQL,SQL中包含ORDER BY 字句,但是在执行的时候报错如下: 经过查询发现是由于临时表空间的PAGESIZE不够大,可考虑建16k或者32k PAGESIZE的表空间 示例如下: ...