每天一个JavaScript实例-展示设置和获取CSS样式设置
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>每天一个JavaScript实例-展示设置和获取CSS样式设置</title>
<style>
#date{
width:200px;
background-color:lime;
}
</style>
<script>
function getStyle(date,cssprop,cssprop2){
//IE
if(date.currentStyle){
return date.currentStyle[cssprop];
}else if(document.defaultView && document.defaultView.getComputedStyle){
//console.log(document.defaultView.getComputedStyle(date,null).getPropertyValue(cssprop));
return document.defaultView.getComputedStyle(date,null).getPropertyValue(cssprop2);
}else{
return null;
}
}
window.onload = function(){
var date = document.getElementById("date");
var color = getStyle(date,"background-color","background-color");
console.log(color);
date.style.width= "500px";
date.style.backgroundColor= "yellow";
console.log(date.style.width);
console.log(date.style.backgroundColor);
//数组表示法
date.style["fontFamily"] = "courier";
//展示覆盖属性
var style = date.getAttribute("style");
console.log(style); date.setAttribute("style","height:100px");
console.log(document.defaultView.getComputedStyle(date,null).getPropertyValue("fontFamily"));//null
console.log(document.defaultView.getComputedStyle(date,null).getPropertyValue("font-family"));//STHeiti var style = date.getAttribute("style"); //date.style["fontFamily"]="微软雅黑";
var font = getStyle(date,"fontFamily","font-family");
//console.log(font);
}
</script>
</head> <body> <div id = "date" style="color:purple">
aa
</div> </body>
</html>
每天一个JavaScript实例-展示设置和获取CSS样式设置的更多相关文章
- 使用jQuery设置和获取css样式
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
- 每天一个JavaScript实例-获取元素当前高度
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-从一个div元素删除一个段落
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-推断图片是否载入完毕
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 每天一个JavaScript实例-动态省份选择城市
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-递归实现反转数组字符串
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-canvas绘图
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- odp.net 读写oracle blob字段
DEVELOPER: ODP.NET Serving Winning LOBs: http://www.oracle.com/technetwork/issue-archive/2005/05-nov ...
- [LA_3938]最大连续动态和
Sample Input 3 1 1 2 3 1 1 Sample Output Case 1: 1 1 线段树 L,R表示该区间的左右端点,sum表示该区间值的总和 l,r表示该区间连续的最大和的左 ...
- linux缺页异常处理--内核空间【转】
转自:http://blog.csdn.net/vanbreaker/article/details/7867720 版权声明:本文为博主原创文章,未经博主允许不得转载. 缺页异常被触发通常有两种情况 ...
- java基础练习 17
import java.util.Scanner; public class Seventheen { /*企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%:利润高于10万元 ...
- 1.tornado基础
import tornado.web ''' tornado基础web框架模块 ''' import tornado.ioloop ''' tornado的核心循环IO模块,封装了linux的epol ...
- 打印PE目录数据信息
printf("数据目录信息:\n"); PIMAGE_DATA_DIRECTORY MyDataDir; MyDataDir = PIMAGE_DATA_DIRECTORY((& ...
- hdu 5101(思路题)
Select Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- Vue.js 2使用中的难点举例--子组件,slot, 动态组件,事件监听
一例打尽..:) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- vs code 在windows10 64bit系统配置python开发环境
一.搭建 python 环境 在 VSC 中点击 F1 键,弹出控制台,输入 ext install 界面左侧弹出扩展窗格,输入python,确认,开始搜索下载发布者为Don Jayamanne 的 ...
- C++之++运算符重载问题
记录++之前先记一下左右值和存取数据的问题 数据的存放分三个部分,堆区,栈区和静态变量区 左值可以更改,右值不能更改 栈区和堆区存储的都是左值,可以随意更改其值,静态变量区部分数据是右值,比如cons ...