英文:
Use calculated php variable to rotate a class item in css
问题
I am having troubles to transfer my calculated php variable (which gives an output form -90 --> 90) to my css bar class (for a gauge). All the code is defined in the same php file
I want to do it with the following:
.bar {
position: absolute;
width: 50%;
height: 100%;
background-color: var(--black);
transform: rotate(<?php echo $degree; ?>deg);
}
This is inside the style element. The value of degree is calculated below the style element inside a p element.
Could anybody help me?
英文:
I am having troubles to transfer my calculated php variable (which gives an output form -90 --> 90) to my css bar class (for a gauge). All the code is defined in the same php file
I want to do it with te following :
.bar {
position: absolute;
width: 50%;
height: 100%;
background-color: var(--black);
transform: rotate(<?php echo $degree; ?>deg)>;
Tis is inside the style element. The value of degree is calculated below the style element inside a p element.
Could anybody help me
答案1
得分: 0
您可以生成一个包含动态值的单独样式表，然后将其包含在您的HTML中。
style.php
<?php
header("Content-type: text/css; charset: UTF-8");
$dynamicValue = ''; // $degree的动态值
?>
.bar {
position: absolute;
width: 50%;
height: 100%;
background-color: var(--black);
transform: rotate(<?php echo $dynamicValue; ?>deg);
}
然后，您需要使用链接元素包含这个样式表，如下所示。
<head>
<link rel="stylesheet" type="text/css" href="style.php">
</head>
英文:
You can generate a separate stylesheet with the dynamic value and then include it in your HTML.
style.php
<?php
header("Content-type: text/css; charset: UTF-8");
$dynamicValue = ''; // Dynamic value of $degree
?>
.bar {
position: absolute;
width: 50%;
height: 100%;
background-color: var(--black);
transform: rotate(<?php echo $dynamicValue; ?>deg);
}
Then you need to include this stylesheet using the link element, like this.
<head>
<link rel="stylesheet" type="text/css" href="style.php">
</head>
答案2
得分: 0
如果您真的是在下面进行“计算”，那么CSS自定义属性仍然可以与此完美配合使用，只需在样式中使用值，可选择使用默认值，然后在标签的style属性中设置自定义属性值：
<style>
.bar {
position: absolute;
width: 50%;
height: 100%;
transform: rotate(var(--local-bar-transform, 0));
}
</style>
<?php
$degree = -10;
?>
<p class="bar" style="--local-bar-transform: <?php echo $degree; ?>deg">Lorem ipsum</p>
CodePen演示：https://codepen.io/cjhaas/pen/rNrgQoK
英文:
If you truly are "calculating it below", then CSS custom properties still work perfectly with this, you just use the value in your style, optionally with a default value, and then set the custom property value in the style attribute on the tag itself:
<style>
.bar {
position: absolute;
width: 50%;
height: 100%;
transform: rotate(var(--local-bar-transform, 0));
}
</style>
<?php
$degree = -10;
?>
<p class="bar" style="--local-bar-transform: <?php echo $degree; ?>deg">Lorem ipsum</p>
CodePen demo: https://codepen.io/cjhaas/pen/rNrgQoK
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论