JavaScripts修改CSS样式

CSS定位XHTML的一个缺点:列的背景只会延伸到内容的长度、
方法一:
为所有容器设置相同的背景色,这样就会隐藏列长度的差异。
方法二:
建立一个和侧栏宽度和样式都相同的图片,使用它作为侧栏容器的背景图片。
方法三:
使用DOM,用DOM获取相邻div的高度(随着内容的变化而变化),然后将侧栏绑定一个style事件。

<div id="wrapper">
    <div id="header"></div>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam iaculis vestibulum turpis. Pellentesque
            mattis rutrum nibh. Quisque orci orci, euismod sit amet, sollicitudin et, ullamcorper at, lorem.
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lectus.
            Mauris eu sapien non enim dapibus imperdiet. Sed eu mauris sed pede mollis commodo. Fusce eget est. Sed
            ullamcorper enim nec est. Cras dui felis, porta vitae, faucibus laoreet, sollicitudin eget, enim. Nulla
            auctor. Fusce interdum diam ac eros. Mauris egestas. Fusce in elit et sem aliquet pretium. Donec nunc erat,
            sodales ac, facilisis a, molestie eu, massa. Aenean nec justo eu neque malesuada aliquet.</p>
        <p>Jay Skript is going to rock your world!

            Together with his compatriots The Domsters, Jay is set for world domination. Just you wait and see.

            Jay Skript has been on the scene since the mid nineties. His talent hasn't always been recognized or fully
            appreciated. In the early days, he was often unfavorably compared to bigger, similarly-named artists. That's
            all in the past now.</p>
    </div>
    <div id="sidebar">
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
        </ul>
    </div>
    <div id="footer"></div>
</div>

样式表:

#wrapper{width:800px;margin:0 auto;}
#siderabr{width:200px;background-colcor:#f00;float:left;}
#content{width:590px;background-color:#ff0;padding:5px;float:right;}
#footer{clear:both;backgroud-color:#0f0;height:50px;}

代码-方法二:

#wrapper{
backgroud-image:url(ajaxbackgroud.jpg);
backgroud-position:top left;
backgroud-repeat:repeat-y;
backgroud-color:#ff0;
width:800px;
margin:0 auto;
}
//解释一下,当背景中同时有背景图片与背景颜色时,背景图片位于上层覆盖背景颜色,覆盖面积依照片大小(当backgroud-repeat:no repeat时)。

代码-方法三:

<srcipt>
function a{
var para=document.getElementById("content").clientHeight;
//获取ID为content的对象的高度(未知的),并将它赋值给para
document.getElementById("siderbar").style.height=para+"px";
//在siderbar对象中插入一个height
}

</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值