Как я могу изменить размер кнопки Dojo без стилизации текста?

Question

Я новичок в Dojo и CSS, поэтому, может быть, мне здесь не хватает чего-то очевидного.

У меня есть страница с несколькими кнопками Dijit, которые создаются программно, и я хочу сделать одну из них больше- оставьте текст в покое и увеличьте расстояние между текстом и краем кнопки.Я не хочу переопределять CSS для .dijiButtonNode, чтобы сделать это, потому что на странице есть другие кнопки Dijit, которые не должны быть изменены.

Я попытался добавить это в объявление виджета:

style: { padding: "1em" }

и это:

class: "PaddedButton"

.PaddedButton
{
    padding: 1em;
}

, но поскольку кнопки Dijit отображаются как вложенные интервалы, вместо этого область вокруг кнопки заполняется.

Answer 1

Лучший способ работать с CSS - это использовать один из инструментов отладки браузера (который вы уже должны использовать), например Firebug или инструменты разработчика Chrome. Вы можете легко найти узел DOM элемента с помощью inspect_element, а затем напрямую редактировать его стили CSS, пока они не сделают то, что вы хотите. Вы также можете увидеть, какие правила CSS активны, а какие игнорируются или перезаписываются.

Вот мой рабочий пример: http://jsfiddle.net/missingno/FrYdx/2/

Важной частью является следующий селектор CSS:

.paddedButton.dijitButton .dijitButtonNode {
    padding: 1em;
}

Это выбирает любой узел с классом dijitButtonNode, который происходит от узла, который имеет оба класса paddedButton и dijitButton. Я не мог сделать просто .paddedButton .dijitButtonNode, потому что тогда правило заканчивалось бы каскадом более специфического селектора.