<!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. 培训补坑(day2：割点与桥+强联通分量)

    补坑ing... 好吧,这是第二天. 这一天我们主要围绕的就是一个人:tarjan......创造的强联通分量算法 对于这一天的内容我不按照顺序来讲,我们先讲一讲强联通分量,然后再讲割点与桥会便于理解 ...

  2. error LNK2001: 无法解析的外部符号 "public: virtual long __stdcall CBaseFilter（转）

    原文转自 https://www.cnblogs.com/xiongjiaji/archive/2010/12/31/2476565.html 今天用VS2005编译DirectShow程序,发现出来 ...

  3. windows下xampp安装PHP的pthreads多线程扩展

    我的运行环境: 系统:windows10 ,64位 PHP:5.6.8 TS,VC11 ,32位 Apache: 2.0 我安装的是xampp集成环境 pthreads的windows扩展文件下载地址 ...

  4. 【ACM】不要62 （数位DP）

    题目:http://acm.acmcoder.com/showproblem.php?pid=2089 杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer).杭州交通管理局经常会扩充一些的士车牌照,新 ...

  5. Selenium2+python自动化30-引入unittest框架【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/unittest/ from selenium import webdriverfrom ...

  6. hdu 1811(缩点+拓扑排序+并查集)

    Rank of Tetris Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  7. 一篇好文档，请Thymeleaf Layout Dialect

    Thymeleaf Layout Dialect https://ultraq.github.io/thymeleaf-layout-dialect/ This will introduce the  ...

  8. Mac下安装node.js , Ionic

    访问node.js官网(https://nodejs.org/en/download/),下载相应的版本. 下载完,点击安装  [默认目录] Node.js v8.9.3 to /usr/local/ ...

  9. C++大数板子

    C++大数板子 使用样例在主函数里看就好,必要的运算符都重载了. #include <iostream> using namespace std; ;/*精度位数,自行调整*/ //1.如 ...

  10. 在CentOS 7上安装Node.js

    一.安装1.进入官网下载最新版本https://nodejs.org/en/ 选择下载后上传或直接使用wget下载 wget https://nodejs.org/dist/v8.11.2/node- ...