javascript之样式一_script中的样式-CSDN博客

本文链接：https://blog.csdn.net/rainkin1993/article/details/7916101

漫漫学习之路何其久远,只有抛弃浮躁,静下来看书方能有所收获.
写此文章仅为记录自身学习之路,文章内容不是固定的,每当我发现新的东西就会添加进去.文章也可能有错误,希望看到的兄弟能帮我指出,在此小弟谢谢了.

一。修改样式的方法
1.通过id修改
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function(){
alert('stop');
document.getElementsByTagName('p')[0].id = 'big';}//改变id
</script>
<style type="text/css">
#big {width:300px;
height:300px;
background-color:#000;}
#small{width:150px;
height:300px;
background-color:#eee;}
body{height:3333px;}
</style>
</head>
 
<body>
<div id="small" ><p id="p">sadf</p></div>
 
</body>
</html>
 
缺点：不过这种方法不好，因为id是唯一的，修改了会造成很大的混乱
 
2.修改class

 
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function(){
alert('stop');
document.getElementById('p').className = 'big';}//注意这里是className  
</script>
<style type="text/css">
.big {width:300px;
height:300px;
background-color:#000;}
.small{width:150px;
height:300px;
background-color:#eee;}
body{height:3333px;}
</style>
</head>
 
<body>
<div id="p" class='small'><p id="p">sadf</p></div>
 
</body>
</html>

缺点：class能有很多个  ，比如class=‘big small much’ 这样就不好修改
解决：写个函数
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function(){
alert('stop');
delCss(document.getElementById('p'),'blue');//先把blue删除
addCss(document.getElementById('p'),'red');//再添加red
function addCss(obj,cn)
{
obj.className+= ' '+cn;
}
function delCss(obj,cn)
{
obj.className = obj.className.replace(newRegExp('\\b'+cn+'\\b'),'');//注意这里replace之后返回一个字符串  并不会改变原来的字符串
}
}
</script>
<style type="text/css">
.red{
border:#C00dotted thin}
.blue{
border:#00Fsolid thin}
.small
{
width：100px;
}
</style>
</head>
 
<body>
<div id="p" class='small blue'><p id="s">sadf</p></div>
 
</body>
</html>

3.修改style(1)元素的style属性是一个对象，css的属性和值映射到这个对象中，比如
<div id="p" style='width:100px;'><p id="s">sadf</p></div>
alert(document.getElementById('p').style.width);//可通过访问width

(2)font-size有减号的这类css属性需要通过fontSize访问

<div id="p" style='font-size:30px;'><p id="s">sadf</p></div>
alert(document.getElementById('p').style.fontSize);

可通过访问font-size

(3)cssText

style有个cssText属性,表示所有的属性

<div id="p" style='font-size:30px; width:100px;'><pid="s">sadf</p></div>
alert(document.getElementById('p').style.cssText);

（4）缺点：不能显示css样式表中的属性只能显示内联的css样式