загружать и применять один и тот же класс css из двух разных файлов на двух разных элементах

При условии, что у меня есть два разных файла css, каждый из которых содержит определение одного и того же класса css (например, .mainDiv {}), но каждый класс будет иметь разные свойства, уметь применять их к двум различным div в моем HTML-коде (скажем, с идентификаторами myMainDiv1 и myMainDiv2)?загружать и применять один и тот же класс css из двух разных файлов на двух разных элементах

Я понимаю, что это уже не связь между идентификаторами элементов div и именами css classe, но я хотел бы знать, возможно ли каким-либо образом анализировать/читать каждый файл css - через JavaScript - и применять правила динамически для каждого из мои divs.

Поэтому я никоим образом не хочу вносить изменения в файлы css; Я могу иметь столько, сколько необходимо, но все они должны иметь очень точные имена классов (например, mainDiv); через JavaScript - если возможно - я могу применять стили для каждого из своих div.

источник

2015-11-24 Sonofkyuss

Для того, чтобы прочитать содержание CSS файлы вы можете их стиль с яваскриптом его самостоятельно. Если вы не знаете контент css или контент слишком велик. Или вы можете использовать препроцессор css, например sass или less, для импорта стилей и называть их другим именем, а затем применить к divs –

Да, это было бы идеально в этом случае. Я бы хотел попробовать не использовать sass, хотя, просто легкий JavaScript. Любая известная совместимость с браузером - проблемы в отношении чтения/хранения правил css из файла css, а затем применения их к элементу div, я должен знать об этом в этом направлении? – Sonofkyuss

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

Лучшим вариантом является префикс каждого правила в каждом файле. Поэтому, если у вас есть light-theme.css и dark-theme.css, тогда каждое правило в light-theme.css начнется с чего-то вроде .light-theme (и то же самое касается dark-theme.css ->.dark-theme).

Как только каждое правило имеет префикс соответственно, вы можете включить оба файла и просто добавить класс на основе того файла CSS, который вы хотите применить.

/* Shared styles */ 
 
#content { 
 
    height: 400px; 
 
    width: 400px; 
 
} 
 
#content > div { 
 
    width: 200px; 
 
    float: left; 
 
} 
 
ul { 
 
    list-style: square inside; 
 
} 
 
li { 
 
    height: 40px; 
 
} 
 

 

 

 
/* light-theme.css */ 
 
.light-theme li { 
 
    color: #339; 
 
    background-color: #fff; 
 
} 
 

 

 

 
/* dark-theme.css */ 
 
.dark-theme li { 
 
    color: #ccf; 
 
    background-color: #333; 
 
}

<div id="content"> 
 
    <div class="light-theme"> 
 
    <h2>Light</h2> 
 
    <ul> 
 
     <li>Red</li> 
 
     <li>White</li> 
 
     <li>Blue</li> 
 
    </ul> 
 
    </div> 
 
    <div class="dark-theme"> 
 
    <h2>Dark</h2> 
 
    <ul> 
 
     <li>Alpha</li> 
 
     <li>Beta</li> 
 
     <li>Gamma</li> 
 
    </ul> 
 
    </div> 
 
</div>

источник

2015-11-24 18:03:18 JimmyBoh

Спасибо @ JimmyBoh Это было бы идеально, если бы у меня не было тонны правил CSS в каждом файле, поэтому я бы хотел, чтобы конечный пользователь не переименовал каждое правило (добавив префикс, например, предложенный или суффикс). Не владейте css, но не существует способа решить эту проблему - согласно вашему предложению выше - нужно только переименовать один раз в одном конкретном месте в каждом файле css (при условии, что существует 50 правил) и не добавлять к ним префикс править? – Sonofkyuss

Вы можете переключиться на LESS или SASS. Это препроцессоры CSS, которые предоставляют дополнительные языковые функции для таких вещей, как переменные, mixins и, самое главное, для вас [вложенные правила] (http://lesscss.org/features/#features-overview-feature-nested-rules). Это означает, что вы можете обернуть весь файл, а не изменять каждое правило. Когда CSS создается, он будет включать префиксные значения. Это сложнее, но это действительно тот ответ, который вы ищете. (Вы даже можете использовать его один раз, чтобы создать новый CSS-файл со всеми установленными префиксами). – JimmyBoh

Вам придется переопределить неправильные стили с более конкретными селекторами.

#myMainDiv1.mainDiv { ... } 
#myMainDiv2.mainDiv { ... }

источник

2015-11-24 17:53:05 isherwood

Спасибо @isherwood. Что делать, если я не могу этого сделать, и у меня есть только .mainDiv {} в каждом файле CSS? Я подумал, может быть, о решении, где я бы добавил таблицу стилей в тег HEAD через JS, прочитал класс mainDiv и сохранил его в JS (используя такое решение, как этот [один] (http://stackoverflow.com/ questions/324486/how-do-you-read-css-rule-values-with-javascript), затем удаляет таблицу стилей из HEAD и добавляет вторую, а затем повторяет тот же шаг. Не 100% уверены, что это возможно, любые предложения/мысли? – Sonofkyuss

Вы можете дать несколько классов элементу. Если вы используете класс mainDiv

<div class="mainDiv firstMainDiv"></div> 
<div class="mainDiv secondMainDiv"></div>

теперь стили, данные с именем класса .mainDiv будут применяться на обоих. Но если вы хотите, чтобы дать некоторые стили специально для первого DIV, то вы можете использовать оба класса

.mainDiv.firstMainDiv {}

этот стиль будет применяться только в первом дел.

источник

2015-11-24 17:55:24

загружать и применять один и тот же класс css из двух разных файлов на двух разных элементах

ответ

Смежные вопросы