<!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样式设置的更多相关文章

  1. 使用jQuery设置和获取css样式

  2. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  3. 每天一个JavaScript实例-获取元素当前高度

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 每天一个JavaScript实例-推断图片是否载入完毕

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. 每天一个JavaScript实例-动态省份选择城市

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 每天一个JavaScript实例-递归实现反转数组字符串

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 每天一个JavaScript实例-canvas绘图

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. 转 linux下cat命令详解

    linux下cat命令详解 http://www.cnblogs.com/perfy/archive/2012/07/23/2605550.html 简略版: cat主要有三大功能:1.一次显示整个文 ...

  2. 针对各地项目icomet停止服务的临时处理办法

    1.编辑一个脚本 vi /usr/local/watchicomet.sh #!/bin/bash sn=`ps -ef | grep ./icomet-server | grep -v grep | ...

  3. select 动态添加 获取 整理

    比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector" ...

  4. AC日记——[Wc2008]游览计划 bzoj 2595

    2595 思路: 状压DP+spfa转移+dfs输出路径: 或者,斯坦纳树算法模板: 来,上代码: #include <queue> #include <cstdio> #in ...

  5. FTP-Filezilla首次配置

    最新新弄了个服务器,先吐槽下,之前买镜像都是免费的,昨天试了,竟然收费.... 好吧,用户多了也正常. 代码发布之前都是很暴力的直接远程桌面然后粘贴,有个合作伙伴突然需要FTP,说之前用的就是,我就做 ...

  6. EntityFramework之多对多关系（四）

    上篇介绍了一对多关系,下面介绍下多对多关系代码编写. 1.新建model实体,User是用户类,Role是角色类,由于是多对多关系,必须得有一个中间类,所以产生了UserRole类 public cl ...

  7. struts2进阶

    Struts2 一.Struts的工作原理 Struts2的工作机制3.1Struts2体系结构图 Strut2的体系结构如图15所示: (图15) 3.2Struts2的工作机制 从图15可以看出, ...

  8. 洛谷 ——2925干草出售Hay For Sale

    题目描述 Farmer John suffered a terrible loss when giant Australian cockroaches ate the entirety of his ...

  9. 反汇编引擎Capstone

    反汇编引擎Capstone   Capstone是Kali Linux自带的一款轻量级反汇编引擎.它可以支持多种硬件构架,如ARM.ARM64.MIPS.X86.该框架使用C语言实现,但支持C++.P ...

  10. Linux漏洞建议工具Linux Exploit Suggester

     Linux漏洞建议工具Linux Exploit Suggester 在Linux系统渗透测试中,通常使用Nessus.OpenVAS对目标主机进行扫描,获取目标主机可能存在的漏洞.如果无法进行漏洞 ...