Передача параметра классу CSS с веб-страницы

Устранение проблемы: у меня 2-3 веб-страницы; и я хочу иметь разные цвета тела на этих страницах, но сохранение имени класса уникальным для «myBody».Передача параметра классу CSS с веб-страницы

Я искал много блогов и авторов, но не нашел подходящего ответа для достижения этого с помощью традиционных подходов CSS.

Пожалуйста, предложите, если это возможно, чтобы один класс CSS принимающую параметр с веб-страницы, которая будет решать, что цвет тела следует применять один и тот же CSS с различными параметрами»

.myBody(@color) 
    { 
    background-color: @color; 
    font-size: 11px; 
    color: Black; 
    border: 1px solid; 

    }

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

источник

2015-04-15 Kaps

Вы можете разделить свой класс .myBody в различных классах CSS, и пусть каждые ваши тела, чтобы использовать два (общие один и один конкретный) – Claudio

Вы должны будете использовать другой класс и добавить такие правила, как '.myBody.red {background-color: red; } ' – Pointy

В будущем вы сможете добавить отдельный атрибут в свой тег' ', а затем получить доступ к этому в правиле CSS с помощью оператора 'attr()', но это не поддерживается широко (если вообще) сегодня , – Pointy

Вы должны разделить их на различные классы, как это.

.myBody 
{ 
    font-size: 11px; 
    color: Black; 
    border: 1px solid; 
} 
.background_red 
{ 
    background: red; 
} 
.background_green 
{ 
    background: green; 
}

Затем используйте их как этот

<div class="mybody background_red"></div> 

<div class="mybody background_green"></div>

Вы также имеете возможность перезаписать CSS, как это:

.myBody 
{ 
    background:red; 
} 
.overwrite_background 
{ 
    background:green; 
} 

<div class="myBody"></div> 
<div class="myBody overwrite_background"></div>

Первый DIV будет иметь фон красного цвета, где второй один будет иметь фон зеленый.

Вот еще одно сообщение, на которое вы должны обратить внимание. Это ссылка на пару вариантов, с которыми вы должны справиться. How to pass parameters to css classes

Другой вариант - использовать Sass. Sass позволяет вам использовать язык программирования для создания вашего css. Это замечательно для изменения вещей над массой «на лету». Если вы используете один и тот же цвет в нескольких местах или хотите иметь другую конфигурацию для каждого сайта и по-прежнему иметь один и тот же css только разные цвета.

источник

2015-04-15 17:01:48

Вот еще одно сообщение, на которое вы должны обратить внимание. Это ссылка на пару вариантов, с которыми вы должны справиться. http://stackoverflow.com/questions/17893823/how-to-pass-parameters-to-css-classes –

более точно, если у меня есть строгие инструкции для использования только одного имени класса для тега тела, как показано ниже: On Page1: .... и на странице2: ....; Теперь в обоих случаях у меня есть только один вариант: либо передать параметр со страниц, либо сам, либо иметь любые другие возможные решения. Пожалуйста, предложите также некоторые вещи, связанные с этим ограничением. – Kaps

Спасибо за ссылку Sari Rahal, но она снова написала несколько CSS-классов в моем файле CSS. А также я не использую язык программирования на стороне сервера. В ссылке есть 3 -4 трюка, не могли бы вы предложить, какой из них подходит для этой проблемы? – Kaps

Нет, вы не можете сделать это с помощью определения одного класса. В CSS нет понятия параметров и вызовов функций.

С другой стороны, вы можете сделать это с минимальным дублированием кода, но это, вероятно, плохая идея. Вы говорите, что хотите предположить, что есть только одно имя класса в атрибуте class. Это довольно глупо, потому что он полностью не понимает, для чего нужен атрибут class, но мы все равно откатимся от него.

Мы начнем с определения наших классов только с цветом фона:

.mybody-red { 
    background-color: red; 
} 
.mybody-blue { 
    background-color: blue; 
} 
.mybody-green { 
    background-color: green; 
}

Тогда мы определим код для всех mybody-* классов с атрибутом начинается, с селектором:

div[class^="mybody-"] { 
    font-size: 11px; 
    color: Black; 
    border: 1px solid; 
}

Это, однако, глупая идея, не в последнюю очередь потому, что это означает, что вы не отделяете разметку от стилизации и по множеству других причин.

источник

2015-04-15 17:16:58 lonesomeday

Спасибо @lonesomeday! Я согласился с тем, что этот вопрос глупо с этими ограничениями. Я просто прочитал про передачу миксинов в определение LESS css. Позвольте мне изучить это решение, если оно предоставит мне решения. И еще раз спасибо за ваши ценные предложения. ** # ** ** здесь необходимо проверить. – Kaps

Может быть, вы можете дать уникальный идентификатор в каждой странице и сохранить то же class.What я имею в виду

file1.html 
<html> 
<body id="file1"> 
<div class"myBody"></div> 
</body> 
</html> 

    file2.html 
<html> 
<body id="file2"> 
<div class"myBody"></div> 
</body> 
</html> 

     file3.html 
<html> 
<body id="file3"> 
<div class"myBody"></div> 
</body> 
</html>

У вас есть 3 различных файлов.Каждый файл имеет тег тела с уникальным идентификатором и сНом тегом с классом вы хотите Теперь CSS части:

.myBody 
{ 
    font-size: 11px; 
    color: Black; 
    border: 1px solid; 
}/*common class for all files*/ 

#file1 .myBody{ 
background:green; 
} 

#file2 .myBody{ 
background:red; 
} 
    #file3 .myBody{ 
background:grey; 
}

Это прекрасно работает, если у вас есть 2-3 pages.If у вас есть больше будет жесткий код для поддержания

источник

2015-04-15 17:21:38 cssGEEK

Это работает, когда у вас есть одно или два исключения, но с трудом поддерживается со многими страницами, а также раздувает ваш CSS. –

Что делать, если бы у меня было ** n ** количество страниц; Я не хочу писать больше классов, а просто хочу иметь способ, с помощью которого явный параметр может быть передан определению класса. – Kaps

Вы правы. Если у вас 2-3 веб-страницы, это нормально, но не для многих страниц. – cssGEEK

Как альтернативный вариант, поскольку вы намерены передать цвет через страницу, почему бы просто не установить стиль как встроенное свойство с помощью PHP? Хотя лучше разместить большую часть вашего css в отдельном файле, иногда просто имеет смысл перемещаться по иерархии допустимых мест размещения CSS.

Я не уверен, где вы получаете цвет от конкретного, но нет ничего плохого в настройке встроенного стиля, если это самый эффективный способ сделать это.

Пример:

<?php $bodyColor = $_POST['bodyColor']; ?> 
<div class="myBody" style="background-color:<?php echo $bodyColor; ?>"> 
    YOUR TEXT 
</div>

источник

2015-04-15 18:55:20 testing123

Спасибо за эти предложения; но я хочу обеспечить большую расширяемость и способность управлять моим кодом. Поэтому я бы не пошел с этим решением для моделирования INLINE. – Kaps

Передача параметра классу CSS с веб-страницы

ответ

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