是否有任何捷径可以使 css 定位程序化而不是声明性？答案

【问题标题】：Is there any shortcut to make css positioning programmatic instead of declarative?是否有任何捷径可以使 css 定位程序化而不是声明性？
【发布时间】：2010-11-05 00:13:46
【问题描述】：

从头开始实施会有多复杂？

主要针对布局问题。

之所以要声明式是因为我希望将它封装到一个javascript类中，这样我就不需要一次又一次地处理css缺陷，而是一劳永逸。

【问题讨论】：

如果我理解正确，您说的是由于 css 缺陷而导致的布局问题。你能告诉我们一些你想要完成的事情吗？
我同意merkuro。使用像 Sass（仅举一个例子）这样的 CSS 元语言可能会比使用 Javascript 做所有事情更好。
之所以要声明式是因为我希望将它封装到一个类中，这样我就不需要一次又一次地处理css缺陷，而是一劳永逸。
我建议您查看 JSON CSS，Shore。有关详细信息，请参阅下面的回复。
还有其他语言可以弥补 CSS 的不足，而没有 JavaScript 可怕的不足。你真的应该使用其中之一。

标签： javascript css

【解决方案1】：

这根本不是什么大问题。你只需做类似的事情

document.getElementById('whatever').style.width = 100;

或者，在 jQuery 中，

$('#whatever').css('width', 100);

不过，不得不说，听起来您想用编程样式操作完全替换样式表，这可能是个糟糕的主意。

【讨论】：

是的，我要问的是糟糕的版本:)
这个问题被标记为“JavaScript”，所以我希望他知道这样做的含义，但我同意，用 JavaScript 完全替换 CSS 是一个糟糕的主意。
是的，对于任何运行 noscript 的人来说，您的网站看起来都是垃圾。
在应用程序化样式之前，更不用说初始渲染可能是一大堆疯狂。
你的cmets都是合理的，但是布局是我最头疼的问题，所以我想找到一种方法来修复它一次，再也不需要再处理它了。

【解决方案2】：

老实说，这里唯一正确的答案是不要这样做 - 正确学习 CSS。您似乎想解决 CSS 中的一些缺陷，但除了“布局”之外，您没有说出它们是什么，这与您所能得到的一样模糊。 CSS 可以很好地布局（使用浮动，而不是定位 - 后者很少用于布局）。

据我所知，使用 Javascript 设置 CSS 样式并不能真正解决任何问题。也许您需要更清楚地解释（通过示例）您的问题是什么。

【讨论】：

浮点数当然不能产生人们可能想要的所有类型的布局。
@ilya n - 不，但人们可能想要的大多数布局都可以通过浮动来实现。
@ilya：单靠 CSS 无法实现哪些布局？（我相信你是对的，但我什么都想不出来。）那么 JS 将如何解决这个问题？

【解决方案3】：

你应该澄清你的问题。如果我将其理解为“为什么 CSS 是一种声明性语言而不是命令性语言”，那是因为它在概念上更接近人类希望网页的样式（以及浏览器阅读它的舒适度）。

【讨论】：

或者，要做出漂亮的布局，请使用网络上的标准布局之一。
嗯，您可以像示例中那样使用 jQuery 来根据自己的喜好修改页面，并将其封装到您的对象中......还有什么？

【解决方案4】：

查看 JSON CSS。这是一种相当有趣的方法，它以一种漂亮有序的方式使用 Javascript 的强大功能（执行逻辑等）来设置样式。 Arc90.Labs 有一篇关于该主题的精彩文章，并附有示例。

http://lab.arc90.com/2009/01/json_css.php（也在Google Code上）

演示 JSON CSS 样式表：

{
    "@variables": {
        "demoBgColor": "#FBFAF4"
    },

    "#demoContainer": {
        "background-color": "@{demoBgColor}",
        "border": "1px dotted #CCC",
        "padding": "0.5em",
        "width": "40em",
        "@browser[msie-6]": {
            "width": "400px"
        },

        "h3.header": {
            "text-decoration": "underline"
        },

        "div:first": {
            "font-weight": "bold"
        }
    }
}

【讨论】：