为了避免内联样式，来自动态 HTML 属性或类的 CSS 值？答案

【问题标题】：CSS values from dynamic HTML attribute or class in order to avoid inline styles?为了避免内联样式，来自动态 HTML 属性或类的 CSS 值？
【发布时间】：2017-03-06 16:12:15
【问题描述】：

众所周知，内联样式不是好的做法，它们与例如不兼容。 Content Security Policy。

这是我想要在没有内联样式的情况下实现的目标：

<?php
$spacer_height = 390; // this is a dynamic value from user input could be any integer
?>
<div class="spacer" style="height:<?php echo $spacer_height; ?>"></div>

这就是我想要的：

HTML：

<?php
$spacer_height = 390; // this is a dynamic value from user input
?>
<div class="spacer spacerheight-<?php echo $spacer_height; ?>" data-height="<?php echo $spacer_height; ?>"></div>

外部样式表：

.spacer {
  height: spacer_height + "px"; // this line is dummy code
}

这是一种仅使用 CSS 实现此目的的方法。没有 JavaScript。没有 Polyfill。

我已经找到的是这个 5 年前的问题：CSS values using HTML5 data attribute

但是同时有解决方案还是有不使用属性的 CSS 解决方案？至少有整数的解决方案吗？

编辑：如果没有其他解决方案，即使是有效的 polyfill 也可能是一个受欢迎的答案。

【问题讨论】：

也许<?php echo "<style>". ".spacer {". "height: $spacer_height". "}". "</style>"; ?
不，这是一种解决方法，以便不直接定义为内联样式，但它并不能真正解决问题;-)
如果你把它放在body 的末尾，它会起作用
这就是我提到内容安全策略的原因，它要求您在外部样式表中定义样式。 Ofc 我可以收集所有可能的间隔高度并生成一个外部样式表，但这并不是我真正想要的。我想以某种方式动态选择和应用。
您为什么不直接使用您已经提出的 CSS 解决方案？这就是我会做的，除了我不会打扰 data-height 属性 - 在你的例子中没有做任何事情而且似乎没有必要。

标签： html css attributes

【解决方案1】：

因为你不能只做这个 CSS（然而，因为 attr() 函数只返回字符串值），这里有一个简单的脚本，它将做一些类似于 attr() 所做的事情，尽管这会解析数据并设置它动态地使用cssText。

如果我做对了，请告诉我

window.addEventListener("load", function() {
    var mb = isMobile();
    var el = document.querySelectorAll('[data-css]');
    for (i = 0; i < el.length; i++) {
        var what = el[i].getAttribute('data-css');
        if (what) {
            what = what.split(',');
            el[i].style.cssText = what[0] + ': ' + ((mb) ? what[2] : what[1]) + 'px';
        }
    }
});

function isMobile() {
  //function that check if user is on mobile etc.
  return false;  // return false for this demo
}

html, body {
  margin: 0;
}

div {
    background-color: lightgreen;
    padding: 10px 0;
    height: auto;
    box-sizing: border-box;
}

div ~ div {
    margin-top: 10px;
}

<div data-css="height,60,30"></div>
<div></div>
<div></div>
<div data-css="height,60,30"></div>
<div></div>

另一种选择是在服务器端运行一些东西，您只需在其中创建 CSS 规则和类并将其分别插入 CSS 文件和标记中，然后再发送到客户端

【讨论】：

是的，这是一个很好的解决方法:-) 应该可以扩展它以监听属性更改。但是我很失望没有唯一的 CSS 解决方案我想不出这个限制的充分理由:-(
@Blackbam 希望他们扩展 attr() 以便它可以正确评估其值类型，那将是一个很好的 :) .... 对于属性更改，请使用 MutationObserver

【解决方案2】：

您可以考虑将动态部分从内联移动到在 <style> 中引用。

<style>
.spacer {
    height:<?php echo $spacer_height; ?>
}
</style>
<?php
$spacer_height = 390; // this is a dynamic value from user input could be any integer
?>
<div class="spacer"></div>

【讨论】：