Есть ли какой-нибудь способ сделать позиционирование CSS программным, а не декларативным?

Question

Насколько сложно это будет реализовать с нуля?

В основном из-за проблем с макетом.

Причина, по которой я хочу сделать это декларативным, заключается в том, что я надеюсь инкапсулировать его в класс javascript, чтобы мне не приходилось сталкиваться с дефицитом CSS раз и снова, а не раз и навсегда.

Answer 1

Честно говоря, единственный правильный ответ здесь - , не делайте этого - изучите CSS правильно . Кажется, вы хотите обойти некоторые недостатки в CSS, но вы не говорите, что они есть, за исключением «макета», который выглядит как можно более расплывчатым. CSS отлично справляется с макетом (используя поплавки, а не позиционирование - последний редко используется для верстки).

Установка стилей CSS с использованием Javascript, насколько я вижу, не решает никаких проблем. Может быть, вам нужно более четко (с примерами) объяснить, в чем ваша проблема.

Answer 2

Это на самом деле не имеет большого значения. Вы просто делаете такие вещи, как

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

или, в jQuery,

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

Должен сказать, что, похоже, вы хотите полностью заменить таблицы стилей программными манипуляциями со стилем, и это, вероятно, ужасная идея.

Answer 3

Вы должны уточнить свой вопрос. Если я понимаю, что это «почему CSS является декларативным языком, а не императивом», то это потому, что он концептуально ближе к тому, как люди хотят, чтобы стилизовались веб-страницы (и как браузеры чувствуют себя комфортно при чтении).

Answer 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"
        }
    }
}