87,993
社区成员
发帖
与我相关
我的任务
分享动态style的
<style>
.resize1 {
position : absolute;
border: 0px solid black;
height: 15px;
width: 50px;
overflow: hidden;
background-color: #00ff00;
top : 250px;
left: 100px;
}
.resize2 {
position : absolute;
border: 0px solid black;
height: 100px;
width: 50px;
overflow: hidden;
background-color: #85f285;
top : 150px;
left: 200px;
}
.resize3 {
position : absolute;
border: 0px solid black;
height: 100px;
width: 50px;
overflow: hidden;
background-color: #85f285;
top : 350px;
left: 300px;
}
</style>
其中的resize1,resize2,resize3个数不定，可能会更多，并且其中的background-color的值是不确定的，是从文件读进来的，可能会是任意值，top也不确定，请问我该怎么写啊，怎么定义？
.resize3 {
position : absolute;
border: 0px solid black;
height: 100px;
width: 50px;
overflow: hidden;
background-color: color;
top : ???px
left: 300px;
}
.resize1 {
position : absolute;
border: 0px solid black;
height: 15px;
width: 50px;
overflow: hidden;
background-color: #00ff00;
top : 250px;
left: 100px;
}
.resize2 {
position : absolute;
border: 0px solid black;
height: 100px;
width: 50px;
overflow: hidden;
background-color: #85f285;
top : 150px;
left: 200px;
}
.resize3 {
position : absolute;
border: 0px solid black;
height: 100px;
width: 50px;
overflow: hidden;
background-color: #85f285;
top : 350px;
left: 300px;
}
</style>
其中的resize1,resize2,resize3个数不定，可能会更多，并且其中的background-color的值是不确定的，是从文件读进来的，可能会是任意值，top也不确定，请问我该怎么写啊，怎么定义？
.resize3 {
position : absolute;
border: 0px solid black;
height: 100px;
width: 50px;
overflow: hidden;
background-color: color;
top : ???px
left: 300px;
}
...全文
请发表友善的回复…
发表回复
Web_Team 2009-11-28
- 打赏
- 举报
不错,今天又向高手们学了这一招
嘟嘟xo 2009-11-19
- 打赏
- 举报
<script type="text/javascript" src="jquery.js" ></script>
<script>
function newDiv(b,t){
var obj=jQuery("<div>test</div>");
obj.css({position:"absolute",border:"0px solid black",height:"15px",width:"50px",overflow:"hidden",background:b,top:t,left:"100px"});
jQuery("#start").after(obj);
}
</script>
background:<input type="text" id="b" />
top:<input type="text" id="t" />
<input type="button" id="start" value="New Div" onclick=newDiv(jQuery("#b").val(),jQuery("#t").val()); />
xiaofan_sap 2009-11-19
- 打赏
- 举报
恩 lz在innerHTML里可以动态设置相应的属性 ，用以解析。或者Obj.setAttribute("name",value)也可以
蓝色_冰点 2009-11-19
- 打赏
- 举报
<!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>
<title>无标题文档</title>
<style type="text/css">
/* 统一的样式写在这里 */
.divStyle
{
border:solid 1px red;
width:200px;
height:50px;
position:absolute;
left:200px;
}
</style>
<script language="javascript" type="text/javascript">
var index = 0;
function NewDiv() {
var div = document.createElement("div");
div.className = "divStyle";
div.innerHTML = "这是新的DIV_" + index;
div.style.top = 50 * index + "px"; //动态设置位置
//div.style.backgroundColor = "#FF00FF"; //颜色设置
document.body.appendChild(div);
index++;
}
</script>
</head>
<body>
<input type="button" value="NewDiv" onclick="NewDiv()" />
</body>
</html>abcdefg171459 2009-11-19
- 打赏
- 举报
就是动态生成div,每个div的style也是在div生成之后动态指定，因为那几个属性都是从文件读进来的。请给个完整例子，多谢啦
蓝色_冰点 2009-11-19
- 打赏
- 举报
方法思路错误。如果你有几千项，难道也要几千个style？
说说你要实现的效果吧
说说你要实现的效果吧
