Search code examples
javascriptexpresspugdynamic-url

How to change CSS properties of a page using dynamic URL building with Express?

Let's say there is an element and I need to simply change the color property:

<p id='text'>COLOR</p>

<script>
document.getElementById('text').style.color = "red";
</script>

How can I achieve this by using the dynamic route parameter described here, for example

http://localhost:3000/colors/blue

would make the style.color property of text element, blue.

app.get('/template/:color', function(req, res){
  res.render('view', {
    text: MyText 
    //change css property of 'text' using 'color' url parameter
  });
 });

How can I change the style.color property of a DOM element using Express URL?

Solution

  • Express or server in general cannot modify css properties.

    Personally I would make a condition directly in the frontend.

    For example:

    var urlPath = window.location.pathname;

if(urlPath === "/colors/blue"){
     document.getElementById('text').style.color = "red";
}