<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
// 提交按钮时触发的函数
function subxxx() {
// 获取输入的高度
var hei = document.getElementById("hei").value
// 获取输入的宽度
var wid = document.getElementById("wid").value
// 改变div1的高度和宽度
document.getElementById("div1").style.height = hei+"px"
document.getElementById("div1").style.width = wid+"px"
}
</script>
<body>
<div id="div1" style="width: 50pxheight: 50pxborder: 1px solid red"></div>
<br /><br /><br />
<form>
宽:<input type="text" name="wid" id="wid" />
高:<input type="text" name="hei" id="hei" />
<input type="button" value="提交" onclick="subxxx()" id="sub" />
</form>
</body>
</html>
纯手打, 可用.
你好！！
你这是要修改样式的意思吧，是想通过javascript来控制样式么？
可以直接为元素设置style来达到你想要的效果。
//首先<div class="list_top">增加一个id标识，改为<div id="listTop" class="list_top">
<script>//在这里配置你的内容，对照你自己要的数值就好了
var config={
"_width":"960px",
"_height":"60px",
"_background":"#faa",
"_li_width":"",
"_li_height":"",
"_a_color":"yellow"
}
//初始化函数，将配置的数值，分别设置到元素中
function init(config){
var lstTop = document.getElementById("listTop")
lstTop.style.width = config["_width"]?config["_width"]:lstTop.style.width
lstTop.style.height= config["_height"]?config["_height"]:lstTop.style.height
lstTop.style.background= config["_background"]?config["_background"]:lstTop.style.background
var hot = document.getElementById("hottitle")
hot.style.width = config["_width"]?config["_width"]:hot.style.width
hot.style.height= config["_height"]?config["_height"]:hot.style.height
var ul = document.getElementById("ulid")
ul.style.width = config["_width"]?config["_width"]:ul.style.width
ul.style.height= config["_height"]?config["_height"]:ul.style.height
var lis = ul.getElementsByTagName("li")
for(var i=0i<lis.lengthi++){
lis[i].style.width = config["_li_width"]?config["_li_width"]:lis[i].style.width
lis[i].style.height= config["_li_width"]?config["_li_width"]:lis[i].style.height
var a = lis[i].getElementsByTagName("a")
a[0].style.color = config["_a_color"]?config["_a_color"]:a[0].style.color
}
}
window.onload = function(){
init(config)
}
</script>
这个肯定是一起变化的。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#aa{width:400px}
#bb{width:100%}
</style>
</head>
<body>
<div id="aa">
<div id="bb">#aa的宽为<span id="aaw">400</span><br>#bb的宽为<span id="bbw">0</span></div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
function eleW() {
$("#aaw").text($("#aa").width()+"px")
$("#bbw").text($("#bb").width()+"px")
}
eleW()
$("#aa").width("800")
setTimeout(function() {eleW()},1000)
})
</script>
</html>
