На странице имеется 10000 html элементов с классом .someClass, каков наиболее эффективный способ установить им стиль {color:red}, так, чтобы его можно было впоследствии убрать / изменить / перекрыть. Каков ваш план решения?
Например использовать Sublime Text или любой другой редактор. В поиске строки (Ctrl + H) вводишь регулярку и по ней заменяешь все что надо. Второй вариант — это создать небольшой скрипт, например php, взять весь html, так же заменить все нужные классы регуляркой и перезаписать в этот же файл. PS. Было бы здорово, если ты написал пример того, что ты имеешь и как ты это хочешь в итоге видеть.
нет, замена должна происходить на сайте автоматически в зависимости от выбора настроек юезра или иных событий. Можно предложить использовать javascript c такими значениям $('.someClass').css('color', 'red'); Но у нас 10 000 элементов, и это будет долго срабатывать (например на телефоне). Есть иной метод?
Скорость работы jQ не изменится от мобильной или десктоп версии устройства. убрать / изменить / перекрыть. Убрать, изменить и перекрыть что? Класс, стиль, размер, цвет? Пожалуйста точнее. Если интересует только с front-end, то лучше использовать js и сделать небольшой таймаут между сменой цветов этих элементов, так как от быстрой смены цветов может немного повисать, хотя точно не могу сказать.
Да разные способы есть. Тут самый лучший, имхо - добавлять/удалять классы у элементов. Либо глобально добавлять/удалять условия при которых к элементам применяются стили (пример 2). Пример 1: Имеем такие дивы: Code: <input type='button' class='btn' value='Первая кнопочка'> <input type='button' class='btn' value='Вторая кнопочка'> <input type='button' class='btn' value='Третья кнопочка'> Допустим мы хотим сделать кнопочку синей. Для этого заранее у нас в style.css должен быть прописан стиль: Code: .button.blue {color:#00F} В яваскрипте прописываем: Code: $('.button').addClass('blue'); И все кнопочки становятся синими. Jsfiddle: тыц Пример 2: Можно создавать условия при которых стили к элментам либо применяются, либо нет. Например, сделаем такой стиль: Code: .pc .news {width:50%; float:left} .pc .blogposts {width:50%; float:right} .mobile .news {width:auto} .mobile .blogposts {width:auto} И в зависимости от ширины экрана добавлять к тегу <body> класс .pc или класс .mobile Pastebin: тыц В таком случае второй метод для тебя. Так как в первом jquery будет циклом обходить dom и искать нужные элементы. А во втором браузер нативно в зависимости всего от одного класса родительского элемента применяет применяет ко всем вложенным элементам css-стиль.
Вопрос про динамическое изменение стиля был задан мне на собеседовании при устройстве на работу. Элементы не подгружаются динамически а отображаются в таблице. как вариант можно сделать так... Присвоить некому DIV значение ID HTML: <div id="newColor"> <span>...</span> <span>...</span> <span>...</span> <span>...</span> ... </div> Которое изменит цвет элементов благодаря прописи в файле *.css #newColor span {color:red;} Тогда браузер сам оптимизирует изменение цвета, как вариант он запустит этот процесс многопоточно
