html紹介（4）
4058 ワード
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>CSS</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<style>
#mydiv{
height:80px;
border:1px solid red;
}
.div1{
background:blue;
}
.div2{
padding:20px;
}
.div3{
margin:20px;
}
.div4{
text-align:center;
}
</style>
</head>
<body>
<div id="mydiv" style="width:150px;">css </div>
</body>
</html>
<script type="text/javascript">
// ie
var console = console || {};
console.log = console.log || function(a){
alert(a);
}
/*
css , js css .
*/
/*
css, css , , .
*/
var div = document.getElementById("mydiv");
//
var width = div.style.width;
console.log(width);//150px;
//
var height = div.style.height;
console.log(height);//"", ! , ?
/*
css , dom style , class .
, style ,
currentStyle(IE) getComputedStyle( IE) .
*/
/*
, , css
*/
function getStyle(ele,attr){
var css = "";
if(typeof ele == "object" && ele != null && attr != null){
if(ele.currentStyle){
//ie
css = ele.currentStyle[attr];
}
else{
// ie
css = document.defaultView.getComputedStyle(ele,false)[attr];
}
}
return css;
}
var div = document.getElementById("mydiv");
//
var width = getStyle(div,"width");
console.log(width);//150px;
//
var height = getStyle(div,"height");
console.log(height);//80px;
/*
css , css.
, .
js css ?
, className, cssText, css .
.
*/
// className
var div = document.getElementById("mydiv");
// div class = div1
div.className = "div1";
// class,
div.className = "div1 div2";
// cssText
var css = "font-size:20px;"
div.style.cssText = css;
// width . cssText style .
// , .
var css = "font-size:20px;width:200px;color:white;";
div.style.cssText = css;
// css
div.style.width = "300px";
div.style.fontSize = "30px";// , .
// , , , , .
/*
jquery
*/
// css
var width = $("#mydiv").css("width");
var height = $("#mydiv").css("height");
console.log("width:" + width + ",height:" + height);//width:300px,height:80px
// jquery css, css style , class , jquery , getStyle .
// className
$("#mydiv").addClass("div3");
// className
$("#mydiv").addClass("div3 div4");
// css
$("#mydiv").css("width","400px");
// css
$("#mydiv").css({width:"400px",height:"200px"});
/*
:
1.js css , style class, currentStyle(IE) getComputedStyle( IE) .
2. css , , css , , .
3. jquery css .
*/
</script>