使用javascript动态调整CSS

Dynamically adjust CSS with javascript

本文关键字：CSS 调整 动态 javascript 使用      更新时间：2024-02-07

我创建了一个带有博客的网页，用户可以在上面发布。问题是，随着更多博客的发布，它们最终会超过页面的高度，进入后台。我发布博客的所有代码都进入了下面的内容类：

.content {
float: left;
width: 664px;
text-align: justify;
margin: 0px 0px 30px 0;
padding: 10px 10px 10px 10px;
border-style: solid;
border-color: #D3D3D3;
border-width: 1px;
}

我想知道是否有一种方法可以使用javascript来获取内容窗格的大小，并将其分配给下面页面类的高度：

.page {
background : url(images/page.png) repeat-y top;
height : 1000px;
padding : 0;
margin : 0;
}

我想我正在寻找的是一种使用javascript 为页面重新分配div高度的方法

这是迄今为止的代码：

<?php
include 'connect.php';
include 'header.php';
?>
<form action = 'submitBlog.php' method = 'post'>
<input type="submit" name="Submit" value="Submit a blog"/>
</form>
<?php
$sql = mysql_query("select * from blog order by id desc");
while($row =  mysql_fetch_array($sql)){
$title = $row['title'];
$content = $row['content'];
$date = $row['date'];
$user = $row['user'];
?>
<table border = '1'>
<tr><td><font size = "5"><strong><?php echo $title; ?></strong></font></td><td> Posted on     <?php echo $date; echo "<br>by ".$user;?></td></tr>
<tr><td colspan = '2'><?php echo $content; ?> </td></tr>
<br>
</table>

<?php
}
include 'footer.php';
?> 
<script type = "text/javascript">
function setHeight() {
    var computedHeight = window.getComputedStyle(document.getElementById("content"),null).getPropertyValue("height") ; 
    document.getElementsByClassName('page')[0].style.height = computedHeight;
}
</script>

在纯Javascript中，您可以获得类似的computed height样式

var computedHeight = window.getComputedStyle(
                             document.getElementsByClassName("content")[0], null).                              
                             getPropertyValue("height");

这返回px中.content的计算高度

现在将其设置为page类，如

document.getElementsByClassName('page')[0].style.height = computedHeight;

仅供参考：由于您只提到了className，我使用了0作为索引但是，如果可能的话，最好对这些元素使用id。

在不使用javascript 的情况下，这里至少有两个选项

从.page 中删除高度

.page {
background : url(images/page.png) repeat-y top;
height : 1000px; //delete this line
padding : 0;
margin : 0;
}

或向.content 添加溢出滚动

    .content {
        overflow: scroll;
}

如果将高度设置为auto，它应该可以随心所欲地工作。请检查以下内容：

 .page {
    background-color : url(images/page.png) repeat-y top;
    height : auto;
    padding : 0;
    margin : 0;
    }

您可以查看jQuery，以便在调用某些事件时动态更改CSS属性。你可以在这里找到一个很棒的教程。下面是我的一个老项目的例子：

    $(window).scroll(function (e) {
        $el = $('.fixedElement');
        if ($(this).scrollTop() > 98 && $el.css('position') != 'fixed') {
            $('.fixedElement').css({ 'position': 'fixed', 'top': '0px', 'width': '90%', 'min-width': '1200px' });
        }
    });

我没有一个好主意，但我认为这可能会奏效：

page:expression(document.body.height > 1000? "1000": "auto" );

但实际上这是一种糟糕的方式。

相关文章：