创建可编辑样式 JS 或内联样式答案

【问题标题】：Creating editable styles JS or inline style创建可编辑样式 JS 或内联样式
【发布时间】：2016-11-18 03:21:41
【问题描述】：

我正在为一个大型组织创建一个 wordpress 主题，我突然想到了一个我以前没有考虑过的想法。使用 JS 动态显示客户端创建的样式或内联 css 更好吗？我使用的是内联样式，但意识到在 js 中使用数据集循环可能同样简单。

这是一个示例。我在编辑帖子页面上创建了一个元框，允许用户更改每个帖子的博客页面上的帖子包装、标题文本和段落文本的颜色。

那是不是更好……

<div class='postWrapper' style='<?php echo get_post_meta(...); ?> </div>

在博客页面上或

<div class='postWrapper' data-backgroundColor='#987' ?> </div>

我的 app.js 中的一个循环看起来像......

var postWrapper = document.getElementsByClassName('postWrappter');
    for(i=0; postWrapper.length > i; i++){
    postWrapper[i].style.backgroundColor = postWrapper[i].dataset.backgroundColor;
}

我意识到，就涉及的打字量而言，内联样式似乎更容易、更高效。但是我一直在想，你应该不惜一切代价避免使用内联样式！

希望对此有一些意见！谢谢！

【问题讨论】：

标签： javascript css wordpress frontend

【解决方案1】：

在我看来，内联样式不好，但在这种情况下，使用内联样式没问题，因为我们是动态获取值的。

但我觉得下面的方法比内联样式表更好。 下面应该是<body>:

<script type="text/css">
<?php echo get_post_meta(...); ?>
</script>

<?php echo get_post_meta(...); ?> 应该包含.postWrapper 的所有自定义CSS

这只是我的看法。我想从其他人那里听到更多信息 :)

【讨论】：

谢谢@tympaaz！我什至不认为这是一种选择！