CODEWITHSUNDEEP
javascripthex
Otaku Kyon
Otaku Kyon

Reputation: 445

Javascript: Changing defined color value in a CSS file

As you can see in the code snippet below, I've created a simple colored box in red using HTML and CSS.

I want to create a Javascript file, that checks the current day of the month:

  1. If today is the 1st day of the month it should display the box in it's default color.
  2. If there's a different day, it should multiply the day number with a certain hex number and then add it up to the value in CSS.

I do not know if adding up something to a HEX number is possible, but I guess it should be. Can someone help me with this? 

div {
  background: linear-gradient(#C30000, #7E0000);
  height: 160px;
  width: 250px;
}
<div></div>

Upvotes: 0

Views: 2198

Answers (3)

Sze-Hung Daniel Tsui
Sze-Hung Daniel Tsui

Reputation: 2332

You can do this in pure JavaScript with:
var _someColor = '#7E0000'; // for example
document.getElementById("__DIV__NAME__").style.background = _someColor;

Docs

jQuery has a function that does the same thing. Can also use the callback to do your calculation of color.

Edit: Don't forget you can use rgb(value,value,value) as well, and can make calculations a bit easier.

Upvotes: 0

Balaji Marimuthu
Balaji Marimuthu

Reputation: 2058

you can try something like this.

$('#qaz').css('Color') by using this you only get the rgb color code format

by using javascript function we can get the hex code for rgb 

function rgb2hex(rgb){
 rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
 return (rgb && rgb.length === 4) ? "#" +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
}

and you convert into hex code rgb2hex($('#qaz').css('Color')) then you can multiply into number and set the color by using css style properties.

Upvotes: 0

digawp
digawp

Reputation: 335

Since the color of the div will change everyday anyway, I suggest you to set the color of the div only in JavaScript instead of via CSS to prevent complication and undesired behaviour.

To set the color of an HTML element:

document.getElementById("your-div-id").style.background = color;

where color is a string, either a common color name ("blue", "black", "white" etc) or a hexadecimal string ("#FFF", "#123456", etc).

Don't forget to give your div an id first. (eg <div id="my-div"></div>)

As I mentioned in the comment, it is possible to declare a hex number in JavaScript, but internally it will still be stored in decimal. It is not an issue though, but just take note when you are debugging.

To convert it to a hex string (taken from here):

var colorInHexString = colorInHexNumber.toString(16);

And because the HTML only accepts hex string with # prepended, so don't forget to do that.

In case you do not know how to get the day of the month, you can get it from here.

tl;dr

So the full code:

<div id="my-div"></div>
<script>
    var defaultColor = 0xC30000;
    var multiplier = 0x20; // for example
    var dayNumber = new Date().getDate() - 1; // first day of month uses defaultColor
    var todayColor = defaultColor + dayNumber * multiplier;
    var todayColorString = "#" + todayColor.toString(16);
    document.getElementById("my-div").style.background = todayColorString;
</script>

Hope this helps.

Upvotes: 1

Related Questions