All geek questions in one place

Passing a parameter to a CSS class from a web page

The problem is that I have 2-3 web pages; and I want to have different body colors on these pages, but keeping the class name unique to "myBody".

I searched a lot of blogs and authors, but did not find a suitable answer to achieve this from the traditional CSS approaches.

Please suggest that if one CSS class takes a parameter from a web page that will determine which body color should be applied using the same CSS with different parameters "

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

The answer may be complicated for some people, but I really want to see if I can achieve this using only CSS.

+6
source share
4 answers

You must separate them into different classes like this.

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

Then use them as

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

You also have the option to overwrite css as follows:

 .myBody { background:red; } .overwrite_background { background:green; } <div class="myBody"></div> <div class="myBody overwrite_background"></div>

The first div will have a red background, where the second will have a green background.

Here is another post you should look at. This is a link to a couple of options that you must deal with. How to pass parameters to css classes

Another option is to use Sass . Sass allows you to use a programming language to create your css. This is great for changing things over the mass on the fly. If you use the same color in several places or want to have a different configuration for each site and still have the same css only different colors.

+5
source

No, you cannot do this with a single class definition. In CSS there is no concept of parameters and function calls.

On the other hand, you can do this with minimal code duplication, but this is probably a bad idea. You say you want to assume that there is only one class name in the class attribute. This is pretty stupid because he completely misunderstands what the class attribute means, but we will roll back from it anyway.

Let's start by defining our classes with just the background color:

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

Then we define the code for all mybody-* classes with the start-with selector attribute:

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

This, however, is a stupid idea, not least because it means that you do not separate the markup from the stylization for many other reasons.

0
source

Perhaps you can specify a unique identifier on each page and keep the same class. What I mean

 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>

You have 3 different files. Each file has a body tag with a unique identifier and a div tag with the class you want Now the css part:

 .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; }

This works fine if you have 2-3 pages. If you have more, it will be hard code to support

0
source

As an alternative, since you intend to pass color through the page, why not just set the style as an inline property using PHP? While it's best to place most of your css in a separate file, sometimes it makes sense to navigate the hierarchy of valid CSS placements.

I'm not sure where you get the color from a particular one, but there is nothing wrong with setting an inline style if this is the most efficient way to do this.

Example:

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

Source: https://habr.com/ru/post/985199/

More articles:


All Articles