我想知道如何在呈现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>