javascript - How to change the color of the text dynamically? - Stack Overflow

admin管理员组

文章数量:1315348

I wanted to change the color of the heading during specific times of the day.(e.g At night blue, in the morning green...) For this I'm trying to use inline-css(inside js file).

My css file:

.heading {
  font-size: 50px;
  font-weight: bold;
  border-bottom: 5px solid black;
}

My js file:

import React from "react";
import ReactDOM from "react-dom";

const root = document.getElementById("root");

const curretnTime = new Date().getHours();

if (curretnTime < 12 && curretnTime >= 0) {
  ReactDOM.render(
    <div>
      <h1 className="heading">Good Morning</h1>
    </div>,
    root
  );
} else if (curretnTime >= 12 && curretnTime <= 18) {
  ReactDOM.render(
    <div>
      <h1>Good Afternoon</h1>
    </div>,
    root
  );
} else {
  ReactDOM.render(
    <div>
      <h1>Good Evening</h1>
    </div>,
    root
  );
}

I know it is pretty easy question to ask, but any answer would be helpful. Thank you.

I wanted to change the color of the heading during specific times of the day.(e.g At night blue, in the morning green...) For this I'm trying to use inline-css(inside js file).

My css file:

.heading {
  font-size: 50px;
  font-weight: bold;
  border-bottom: 5px solid black;
}

My js file:

import React from "react";
import ReactDOM from "react-dom";

const root = document.getElementById("root");

const curretnTime = new Date().getHours();

if (curretnTime < 12 && curretnTime >= 0) {
  ReactDOM.render(
    <div>
      <h1 className="heading">Good Morning</h1>
    </div>,
    root
  );
} else if (curretnTime >= 12 && curretnTime <= 18) {
  ReactDOM.render(
    <div>
      <h1>Good Afternoon</h1>
    </div>,
    root
  );
} else {
  ReactDOM.render(
    <div>
      <h1>Good Evening</h1>
    </div>,
    root
  );
}

I know it is pretty easy question to ask, but any answer would be helpful. Thank you.

• javascript
• html
• css
• reactjs

Share Improve this question Follow edited Oct 21, 2024 at 5:41 DarkBee 15.6k88 gold badges7272 silver badges117117 bronze badges asked Oct 8, 2020 at 6:26 Asadullo RakhimovAsadullo Rakhimov 3511 gold badge22 silver badges99 bronze badges 1

• Add style inside your H1 element. <h1 style="color: blue">Good Evening</h1>. This is called inline style. Alternative define CSS class .headingBlue etc. and use <h1 class="headingBlue">Good Evening</h1> – Francois Taljaard Commented Oct 8, 2020 at 8:57

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 3

You should use inline styles, like:

import React from "react";
import ReactDOM from "react-dom";

const root = document.getElementById("root");

const curretnTime = new Date().getHours();

let timeOfDay = 'evening';   // not used

let timeOfDayColor = 'blue';
let timeOfDayMessage = 'Good Evening';

if (curretnTime < 12 && curretnTime >= 0) {
   timeOfDay = 'morning';

   timeOfDayColor = 'green';
   timeOfDayMessage = 'Good Morning';

} else if (curretnTime >= 12 && curretnTime <= 18) {
   timeOfDay = 'afternoon';

   timeOfDayColor = 'purple';
   timeOfDayMessage = 'Good Afternoon';
}

ReactDOM.render(
    <div>
      <h1 className="heading" style={{backgroundColor: timeOfDayColor}} >{timeOfDayMessage}</h1>
    </div>,
    root
);

The style={{backgroundColor: timeOfDayColor}} is your inline style that overrides the CSS style : https://www.w3schools./react/react_css.asp

However, you should really use ponents and not have all the code in the ReactDOM.render method. Maybe try a react tutorial first: https://reactjs/tutorial/tutorial.html

I'd remend using different classes over inline css.

.heading {
  font-size: 50px;
  font-weight: bold;
  border-bottom: 5px solid black;
}

.heading.morning {
  color: green;
}

.heading.afternoon {
  color: purple;
}

.heading.night {
  color: blue;
}

if (currentTime < 12 && currentTime >= 0) {
  ReactDOM.render(
    <div>
      <h1 className="heading morning">Good Morning</h1>
    </div>,
    root
  );
} else if (currentTime >= 12 && currentTime <= 18) {
  ReactDOM.render(
    <div>
      <h1 className="heading afternoon">Good Afternoon</h1>
    </div>,
    root
  );
} else {
  ReactDOM.render(
    <div>
      <h1 className="heading night">Good Evening</h1>
    </div>,
    root
  );
}

You can do it in different ways, one of them is below:

JS file

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const root = document.getElementById("root");

const curretnTime = new Date().getHours();
if (curretnTime < 12 && curretnTime >= 0) {
  ReactDOM.render(
    <div className="morning">
      <h1>Good Morning</h1>
    </div>,
    root
  );
} else if (curretnTime >= 12 && curretnTime <= 18) {
  ReactDOM.render(
    <div>
      <h1>Good Afternoon</h1>
    </div>,
    root
  );
} else {
  ReactDOM.render(
    <div className="evening">
      <h1>Good Evening</h1>
    </div>,
    root
  );
}

CSS file

h1 {
  font-size: 50px;
  font-weight: bold;
  border-bottom: 5px solid black;
}

.morning {
  color: green;
}

.evening {
  color: blue;
}

I think that you are not using inline-css - To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.. But that is just "definition".

Anyway, what are you doing is not correct. You should create a ponent (see: https://reactjs/docs/react-ponent.html) where you will have logic for the change of color (see: https://reactjs/docs/faq-state.html#what-does-setstate-do - you can save the color in state). Then you can add the ponentDidMount method and there you can add setInterval - so you can basically set "every X hour I will change the color".

You could do this:

import React from 'react';
import ReactDOM from 'react-dom';

const time = new Date().getHours();
let greeting;
let color = {};

if (time <= 12) {
  greeting = 'Good morning';
  color.color = 'red';
} else if (time > 12 && time <= 18) {
  greeting = 'Good afternoon';
  color.color = 'green';
} else {
  greeting = 'Good night';
  color.color = 'blue';
}

ReactDOM.render(
  <h1 className="heading" style={color}>
    {greeting}
  </h1>,

  document.getElementById('root')
);

You can trying using the following code:

import React from "react";
import ReactDOM from "react-dom";

const currentDate = new Date();
//const hour = 19; // anything b/w 0 - 24 to check
const hour  = currentDate.getHours();

let greeting = "Good Evening";
let colorStyle = { color: "blue" };

if (hour >= 0 && hour <= 12) {
    greeting = "Good Morning";
    colorStyle = { color: "red" };
} 
else if (hour >= 12 && hour <= 18) {
    greeting = "Good Afternoon";
    colorStyle = { color: "green" };
}

ReactDOM.render(
  <div>

      <h2 style={colorStyle}>{greeting}</h2>

  </div>,
  document.getElementById("root")
);

You can try this:-

import React from "react";
import ReactDOM from "react-dom";

const curretnTime = new Date().getHours();

let greetings;
const customStyle = {
  color: ""
  };

 if (curretnTime < 12) {
  greetings = "Good Morning";
  customStyle.color = "red";
 } else if (curretnTime < 18) {
  greetings = "Good Evening";
  customStyle.color = "green";
 } else {
  greetings = "Good Night";
  customStyle.color = "blue";
 }

 ReactDOM.render(<h1 className="heading" style={customStyle} > 
 {greetings}</h1>, document.getElementById("root"));

//YOu can try this

import React from "react";
import ReactDOM from "react-dom";

const today = new Date();
const hour = today.getHours();

const text = {
  color: "",
  backgroundColor: ""
};

let greet;

if (hour >= 0 && hour < 12) {
  greet = "Good morning";
  text.color = "orange";
  text.backgroundColor = "blue";
} else if (hour >= 12 && hour < 16) {
  greet = "Good Afternoon";
  text.color = "blue";
  text.backgroundColor = "orange";
} else if (hour >= 16 && hour < 19) {
  greet = "Good Evening";
  text.color = "white";
  text.backgroundColor = "purple";
} else {
  greet = "Good Night";
  text.color = "grey";
  text.backgroundColor = "pink";
}

ReactDOM.render(<h1 style={text}>{greet}</h1>, document.getElementById("root"));

本文标签： javascriptHow to change the color of the text dynamicallyStack Overflow