HTML. эффективный способ установить стиль

Discussion in 'PHP' started by rudi, 23 Dec 2016.

  1. rudi

    rudi Active Member

    Joined:
    3 Jun 2010
    Messages:
    487
    Likes Received:
    184
    Reputations:
    5
    На странице имеется 10000 html элементов с классом .someClass,
    каков наиболее эффективный способ установить им стиль {color:red}, так, чтобы его можно было впоследствии убрать / изменить / перекрыть.
    Каков ваш план решения?
     
  2. ol1ver

    ol1ver Active Member

    Joined:
    22 Jul 2011
    Messages:
    237
    Likes Received:
    155
    Reputations:
    0
    через javascript
     
    #2 ol1ver, 24 Dec 2016
    Last edited: 24 Dec 2016
  3. rudi

    rudi Active Member

    Joined:
    3 Jun 2010
    Messages:
    487
    Likes Received:
    184
    Reputations:
    5
    каким образом
     
  4. bologer

    bologer Member

    Joined:
    25 Nov 2016
    Messages:
    62
    Likes Received:
    18
    Reputations:
    3
    Например использовать Sublime Text или любой другой редактор. В поиске строки (Ctrl + H) вводишь регулярку и по ней заменяешь все что надо.

    Второй вариант — это создать небольшой скрипт, например php, взять весь html, так же заменить все нужные классы регуляркой и перезаписать в этот же файл.

    PS. Было бы здорово, если ты написал пример того, что ты имеешь и как ты это хочешь в итоге видеть.
     
  5. rudi

    rudi Active Member

    Joined:
    3 Jun 2010
    Messages:
    487
    Likes Received:
    184
    Reputations:
    5
    нет, замена должна происходить на сайте автоматически в зависимости от выбора настроек юезра или иных событий.
    Можно предложить использовать javascript c такими значениям $('.someClass').css('color', 'red');
    Но
    у нас 10 000 элементов, и это будет долго срабатывать (например на телефоне).
    Есть иной метод?
     
  6. bologer

    bologer Member

    Joined:
    25 Nov 2016
    Messages:
    62
    Likes Received:
    18
    Reputations:
    3
    Скорость работы jQ не изменится от мобильной или десктоп версии устройства.

    убрать / изменить / перекрыть.
    Убрать, изменить и перекрыть что? Класс, стиль, размер, цвет?
    Пожалуйста точнее.

    Если интересует только с front-end, то лучше использовать js и сделать небольшой таймаут между сменой цветов этих элементов, так как от быстрой смены цветов может немного повисать, хотя точно не могу сказать.
     
  7. pas9x

    pas9x Elder - Старейшина

    Joined:
    13 Oct 2012
    Messages:
    423
    Likes Received:
    582
    Reputations:
    52
    Да разные способы есть. Тут самый лучший, имхо - добавлять/удалять классы у элементов. Либо глобально добавлять/удалять условия при которых к элементам применяются стили (пример 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-стиль.
     
    #7 pas9x, 24 Dec 2016
    Last edited: 24 Dec 2016
  8. rudi

    rudi Active Member

    Joined:
    3 Jun 2010
    Messages:
    487
    Likes Received:
    184
    Reputations:
    5

    pas9x

    Думаю второй пример более предпочтительней

     
  9. ol1ver

    ol1ver Active Member

    Joined:
    22 Jul 2011
    Messages:
    237
    Likes Received:
    155
    Reputations:
    0
    10к. разбивать на страницы нельзя? или подгружать по мере скроллинга?
     
  10. rudi

    rudi Active Member

    Joined:
    3 Jun 2010
    Messages:
    487
    Likes Received:
    184
    Reputations:
    5
    Вопрос про динамическое изменение стиля был задан мне на собеседовании при устройстве на работу.
    Элементы не подгружаются динамически а отображаются в таблице.
    как вариант можно сделать так...
    Присвоить некому DIV значение ID
    HTML:
    <div id="newColor">
        <span>...</span>
        <span>...</span>
        <span>...</span>
        <span>...</span>
        ...
    </div>
    Которое изменит цвет элементов благодаря прописи в файле *.css
    #newColor span {color:red;}

    Тогда браузер сам оптимизирует изменение цвета, как вариант он запустит этот процесс многопоточно
     
  11. ol1ver

    ol1ver Active Member

    Joined:
    22 Jul 2011
    Messages:
    237
    Likes Received:
    155
    Reputations:
    0
    ну а в чем тогда проблема. Сам и ответил на свой вопрос.
     
Loading...
Similar Threads - HTML эффективный способ
  1. GAiN
    Replies:
    3
    Views:
    4,924
  2. Cyber_Cat
    Replies:
    1
    Views:
    4,078
  3. 380935901807hd
    Replies:
    14
    Views:
    4,611
  4. schsj
    Replies:
    1
    Views:
    1,772