基于计算定义css元素 - defining css elements based on calculations

defining css elements based on calculations

本文关键字：定义 css 元素计算于计算 | 更新日期: 2023-11-21

我想知道如何在呈现CSS元素维度之前定义它们，例如不使用偏移量和jQuery

我可以将php回声到宽度/高度或位置值的位置吗？例如

<?php 
$width = 290px; 
$altwidth = 290;
?>
<style>
    .widget {
        width: <?php echo $width; ?>;
    }
    .altwidget {
        width: <?php echo $altwidth; ?>px; 
    }

这些都行得通吗，是不是完全错了？

类似地，我将如何使用变量应用JavaScript维度？

$(document).ready(function(){
      $('.widget').css('width', <?php echo $width; ?>);
      $('.altwidget').css('width', <?php echo $altwidth; ?>);
});

如果代码是用php文件编写的，那么它也可以工作。

是的，它会起作用，但您必须将290px设置为$width的字符串（例如$width = "290px";），或者最好采用$altwidth的方式，并将px部分排除在变量之外。

请参阅以下内容，了解如何在页面加载后从JavaScript动态设置维度。我为这个例子添加了一些CSS。

<html>
<head>
    <?php
    $width    = "290px"; // Quotes added
    $altwidth = 290;
    ?>
    <style>
        .widget {
            width:      <?php echo $width; ?>;
            height:     100px;
            color:      white;
            background: green;
            cursor:     pointer;
        }
        .altwidget {
            width:      <?php echo $altwidth; ?>px;
            height:     100px;
            color:      white;
            background: red;
            cursor:     pointer;
        }
    </style>
    <script type="text/javascript">
        var newWidgetWidth    = '200';
        var newAltWidgetWidth = '400';
    </script>
</head>
<body>
    <div class="widget" onclick="this.style.width = newWidgetWidth + 'px';">
        Shrink me
    </div>
    <div class="altwidget" onclick="this.style.width = newAltWidgetWidth + 'px';">
        Grow me
    </div>
</body>
</html>