页面加载好后js写入页面一个表格,怎么让css样式起作用

html-css020

页面加载好后js写入页面一个表格,怎么让css样式起作用,第1张

你在用js创建表格的时候给这个表格添加一个id或者一个class,然后利用这个id或者class来定义你的表格样式,另一种方法你也可以把表格创建在一个div中,比如<div class="div1">用js插入的表格放在这</div>,然后.div1 table {样式},这样利用父级的class或id名来定义也可以。

js可以使网页的功能更加丰富,给网页添加更多实时的、动态的、交互的内容。

举例:

1 当服务端需要对数据进行验证时,使用javascript可以在客户端验证数据,不需要把数据传到服务器端再传回来,比较节省时间。

2 你可以把网页里的内容隐藏起来,然后当鼠标放到某个地方的时候把隐藏的内容显示出来,就像这个页面右上角的”我的知道“那个菜单做的事情。网页里的下拉菜单基本上都使用js完成。

3 当你查看表格的时候,表格的内容很多,你可以使用js给每一行数据设置不同的颜色以示区分,也可以用js完成鼠标指到表格上表格就变色的功能。

4 新闻的幻灯片,可以用JS来做。如果不用JS的话4、5个图片占得地方可是不少。。

5 iGoogle里可以拖来拖去的应用也是用js做的。

6 登录论坛了以后他提示”5秒钟转向你登陆之前查看的页面“

7 还有很多的用途,但是我暂时想不到。。你可以举一反三一下。

css是控制网页外观的,它有以下优点:

1、便于页面的修改。

2、便于页面风格的统一。

3、减少网页的体积。

举例:

假设你有100个页面,每个页面的风格都是一样的,里面都有10个表格。

如果你全部用html来做,就需要给所有的页面的表格里写表格的边框颜色、背景颜色、文字大小(假设这些外观代码要使用3行),那么你就要给1000个表格写这些东西(你就要写3000行。。)。这里面所有的外观设置都是重复的。以后你打算改变表格的风格,你就要改1000个表格。

但是如果你结合HTML和CSS来做,你就可以在每个页面上加上一句

<link href="table.css" rel="stylesheet" type="text/css"/>

然后在table.css这个文件里写上

table{

border:1px solid #ddd

background:#eee

font-size:12px

}

然后你这1000个表格就看起来都一样了。这里只需要写3行代码。

以后你要修改表格,只需要修改table.css里面的这3行代码。

obj.style方法,这个方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),看下面代码

XML/HTML代码

<!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/htmlcharset=utf-8″ />

<title>JS获取CSS属性值</title>

<style type=”text/css”>

<!–

.ss{color:#cdcdcd}

–>

</style>

</head>

<body>

<div id=”css88″ class=”ss” style=”width:200pxheight:200pxbackground:#333333″>JS获取CSS属性值</div>

<script type=”text/javascript”>

alert(document.getElementById(“css88”).style.width)//200px

alert(document.getElementById(“css88”).style.color)//空白

</script>

</body>

</html>

上面这个例子对id为”css88″的div设置了2种烦事的样式,包括style和外部样式class。

从alert出来的信息可以看到,document.getElementById(“css88”).style方法获取不到class为ss的属性和值。

IE中使用的是obj.currentStyle方法,而FF是用的是getComputedStyle 方法。

另外一个方法是:

XML/HTML代码

<!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/htmlcharset=utf-8″ />

<title>S获取CSS属性值</title>

<style type=”text/css”>

<!–

.ss{background:bluecolor:#cdcdcdwidth:200px}

–>

</style>

</head>

<body>

<p id=”qq” class=”ss” >sdf</p>

<script type=”text/javascript”>

function GetCurrentStyle (obj, prop) {

if (obj.currentStyle) {

return obj.currentStyle[prop]

}

else if (window.getComputedStyle) {

propprop = prop.replace (/([A-Z])/g, “-$1”)

propprop = prop.toLowerCase ()

return document.defaultView.getComputedStyle (obj,null)[prop]

}

return null

}

var dd=document.getElementById(“qq”)

alert(GetCurrentStyle(dd,”width”))

</script>

</body>

</html>

当然,如果您是引用外部的css文件同样适用。

另:可以将上面的方法简化为

JavaScript代码

function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性

return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute]

}