JavaScripts修改CSS样式

最新推荐文章于 2024-09-09 11:03:57 发布

WuDangShang

最新推荐文章于 2024-09-09 11:03:57 发布

阅读量639

点赞数

分类专栏： DOM编程艺术文章标签： css dom xhtml

本文链接：https://blog.csdn.net/WuDangShang/article/details/53044125

版权

DOM编程艺术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>