JavaScript: вставка большой строки CSS за один раз, в каждый элемент DOM - PullRequest
Новая
       39

JavaScript: вставка большой строки CSS за один раз, в каждый элемент DOM

0 голосов
/ 10 августа 2010

Это вопрос из двух частей - сначала мне нужно получить каждый элемент, который является дочерним (или дочерним элементом и т. Д.) Родительского элемента, а затем мне нужно сбросить его стиль.Поэтому я собираюсь сделать что-то вроде следующего: 

var everything = parent.getEveryElementBelowThisOne();
for (i=0; i<everything.length; i++)
    everything[i].css = "font: 100%/100% Verdana,Arial,Helvetica,sans-serif; color: rgb(0, 0, o); margin: 0px; padding: 0px; border-collapse: collapse; border-width: 0px; border-spacing: 0px; text-align: left; outline: 0pt none; text-transform: none; vertical-align: middle; background-color: transparent; table-layout: auto; min-width: 0px; min-height: 0px;"

Итак, мои вопросы следующие:

  • Есть ли функция javascript, которая будет эффективно проходить черезDOM ниже заданного элемента?
  • Есть ли функция javascript, которая позволит мне установить такую ​​строку CSS?Или я должен иметь целую кучу записей, таких как: 
everything[i].style.font = ...;
everything[i].style.color = ...;
[...]
everything[i].style.min-height: ...;

jQuery не вариант.

Ответы [ 3 ]

2 голосов
/ 10 августа 2010

Вместо строки я бы использовал объект, гораздо более читаемый и поддерживаемый: 

var new_css = {
    font: '100%/100% Verdana,Arial,Helvetica,sans-serif',
    color: 'rgb(0, 0, o)',
    margin: '0px',
    padding: '0px',
    borderCollapse: 'collapse'
    /* rest here ... */
}

Затем используйте вспомогательную функцию, например: 

function setStyle (element, style) {
    for (var n in style) {
        element[n] = style[n];
    }
}

и в ваш цикл for: 

for (i=0; i<everything.length; i++) setStyle(everything[i],new_css);

Примечание о функции setStyle (до того, как люди понизили меня за это, как в прошлый раз), я намеренно не использовал hasOwnProperty для проверки элементов style, потому что в этом случае, и в большинстве случаев мы используем объект не унаследованный ни от чего. Если вы создаете объект new_css любым другим способом или используете библиотеку (прототип, я смотрю на вас), которая модифицирует прототип объекта, что может вызвать проблемы, тогда не стесняйтесь добавлять проверку hasOwnProperty. В любом случае, установка несуществующих стилевых значений в основном безвредна. А без проверки hasOwnProperty вы можете использовать наследование для создания объектов стиля.

1 голос
/ 10 августа 2010

Использование myElement.style.cssText: 

var everything = parent.getEveryElementBelowThisOne();
for (i=0; i<everything.length; i++)
    everything[i].style.cssText = "font: 100%/100% Verdana,Arial,Helvetica,sans-serif; color: rgb(0, 0, o); margin: 0px; padding: 0px; border-collapse: collapse; border-width: 0px; border-spacing: 0px; text-align: left; outline: 0pt none; text-transform: none; vertical-align: middle; background-color: transparent; table-layout: auto; min-width: 0px; min-height: 0px;"

Но учтите, что это переопределит все примененные атрибуты встроенного стиля. Для добавления дополнительных встроенных CSS вы должны использовать: 

myElement.style.cssText += '; color:red; ...'; // note the initial ";"
0 голосов
/ 10 августа 2010

Это немного необычно, так как, когда вы говорите о родителе, мы предполагаем, что в какой-то момент вы рассматриваете его детей Но когда вы говорите, every element below this one, тогда они могут быть элементами DOM после соответствующего элемента. Ваш может быть в любом случае.

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

nS = parent.nextElementSibling
while(nS){
  nS.style.width = '100%';
  // Change the desired style here
  // You can also further loop on nS's children using `nS.childNodes`,
  // if you want to change their styles too
  nS = nS.nextElementSibling;
}

Как вы можете видеть с необработанным javascript, способ изменить стили довольно отталкивающий. С другой стороны, jQuery предоставляет хорошую функцию DOM, включая легкий переход, даже стиль.

Например, в jQuery было бы то же самое. 

$(parent).nextAll().each(function(){
      $(this).css({'width': '100%', 'other': 'rules', 'as': 'one-dict'});
      // Change the desired style here
      // You can also further loop nS's children using `$(this).children()`, 
      // if you want to change their styles too
});

Надеюсь, это поможет.

...