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

Question

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

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

那么做是不是更好...

<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;
}

我意识到，就涉及的输入量而言，内联样式似乎更简单、更高效。但我的脑海里一直牢记你应该不惜一切代价避免使用内联样式！

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

Answer 1

据我所知，内联样式不好但在这种情况下 还可以 使用内联样式，因为我们正在获取值动态地。

但我觉得下面的方法比内联样式表更好。 下面应该在 <body> 之后：

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

<?php echo get_post_meta(...); ?> 应包含 .postWrapper

的所有自定义 CSS

这只是我的看法。我想听听其他人的更多意见 :)

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

Creating editable styles JS or inline style

javascript

css

wordpress

frontend