Javascript div font color

Css div element font color javascript

The overarching question: Any suggestions on a JavaScript function that sets the text color on all elements within a div? Solution 1: Note child elements color shouldnt have colors, its taken from parent div color Solution 1: CSS: ​Not all browsers accept words as colors try using HEX-code or rgb().

Setting text color on all elements within div

I have a SCSS-mixin that looks like this:

/** * Text color */ @mixin text-color( $color ) < color: $color; h1, h2, h3, h4, h5 < color: $color >p, li < color: $color; >a < color: $color; text-decoration: underline; &:hover < text-decoration: none; >> > 

It’s not the nicest of things, but it’s really handy. I use it, whenever the text color of some child-element is playing up. Every now and then, there is an li or an a that has some styling from further up the tree.

I’m looking for the JavaScript equivalent. The reason is, that I would like the user to select a hex-color, whereafter all elements will get that color.

My current version, is to do something like this (in a Vue-mixin):

mounted()< let chosenHex = #FF0000; this.setTextColorOnAllElements( chosenHex ); >, methods: < setTextColorOnAllElements( textColor )< setTimeout( () =>< // Otherwise the el's aren't rendered this.setTextColorOnTagType( textColor, 'h1' ); this.setTextColorOnTagType( textColor, 'h2' ); this.setTextColorOnTagType( textColor, 'h3' ); this.setTextColorOnTagType( textColor, 'h4' ); this.setTextColorOnTagType( textColor, 'h5' ); this.setTextColorOnTagType( textColor, 'h6' ); this.setTextColorOnTagType( textColor, 'h7' ); this.setTextColorOnTagType( textColor, 'p' ); this.setTextColorOnTagType( textColor, 'li' ); this.setTextColorOnTagType( textColor, 'span' ); this.setTextColorOnTagType( textColor, 'a' ); >); >, setTextColorOnTagType( textColor, tagType ) < if( this.id )< let elements = document.querySelectorAll( '#' + this.id + ' ' + tagType ); elements.forEach( (element) =>< element.style.color = textColor; >); > > > 

It’s just long-winded and feels clumbsy.

The overarching question: Any suggestions on a JavaScript function that sets the text color on all elements within a div?

Note child elements color shouldnt have colors, its taken from parent div color

const container = document.querySelector('.container'); const colorClassPicker = document.getElementById('colorClassPicker'); const colorHexPicker = document.getElementById('colorHexPicker'); const addClass = (className) => < container.classList.replace(container.classList.value, className); >; const addStyle = (hex) => < container.style.color = hex; >; // colorClassPicker.addEventListener('change', (e) => < // addClass(e.target.value); // >); colorHexPicker.addEventListener('change', (e) => < addStyle(e.target.value); >); // addClass(colorClassPicker.value); addStyle(colorHexPicker.value);

Also you could do it by toggle classes in parent div

// colorClassPicker.addEventListener('change', (e) => < // addClass(e.target.value); // >); 

Are you looking for something like this? Run the snippet.

//use querySelectorAll to get all elements within the div var children = document.querySelectorAll("div p") //loop through those elements and change the color for (var i = 0; i

Lorem
 
Ipsum
 
Lorem
 
Ipsum
 
Lorem
 
Ipsum
 
Lorem
 
Ipsum
 

Alternatively, target the parent div to make it even easier:

//use querySelector to target parent div var parent = document.querySelector("div"); //set color on parent div to change color of children parent.style.color = "blue";

Probably not what you’re looking for, but this technically works by virtue of creating and inserting a stylesheet.

const forceColor = (selector, color) => < const rule = [ `$< color: $; >`, ['h1', 'h2', 'h3', 'h4', 'h5', 'p', 'li'].map( v => `$ $` ).join(', ') + ` < color: $; >`, `$ a < color: $; text-decoration: underline; >`, `$ a:hover < text-decoration: none; >`, ].join(' '); const css = document.createElement('style'); css.type = 'text/css'; css.styleSheet.cssText = rule; document.querySelector('head').appendChild(css); >; 

forceColor('.someCSSSelector', '#FF0000'); 

Simple oneliner Javascript:

document.querySelectorAll("p"). forEach(function(x)< x.style='color:brown;background:#CCC';>);

Head 1
Paragraph 1
Head 2
Paragraph 2

Array.prototype.slice.call(document.getElementsByTagName('p')). forEach(function(x)< x.style.color='brown';x.style.background='#CCC';>); 

Change menu text color when div element touches menu, Have a look at IntersectionObservers, and create as many of them as you have white divs. if your site needs to support IE11, you’ll need to

Toggle text color of all div elements

Is there a way to change all the text color to black when the checkobx is checked and back to their original color when unchecked?

I tried the using toggle but am not sure how to retain the original color. The current code is below and here is a fiddle.

 var colors = ['red', 'blue', 'purple', 'green']; $(document).ready(function () < $('.ws-css-table-td').each(function () < var theColor = colors[Math.floor(Math.random() * colors.length)]; $(this).css('color', theColor); >); >); 

.ws-css-table < display: table; >.ws-css-table-tr < display: table-row; >.ws-css-table-td

 var colors = ['red', 'blue', 'purple', 'green']; $(document).ready(function() < $('.ws-css-table-td').each(function() < var theColor = colors[Math.floor(Math.random() * colors.length)]; $(this).css('color', theColor); >); >); $('#blacktext').click(function() < $('.ws-css-table-td').toggleClass('blackcolor'); >)

.ws-css-table < display: table; >.ws-css-table-tr < display: table-row; >.ws-css-table-td < display: table-cell; border: 1px solid #000; width: 15px; height: 15px; text-align: center; vertical-align: middle; >.blackcolor

You can do this using a onclick, add to the checkbox:

Now we are gonna make a function in javascript called makeBlack:

How to set the text-color for different elements in CSS, Colors are very important to give a good look to the website and engage the users. So, different colored text elements are added to enhance

Change the font color of text inside div tag on hovering

I am trying to change the color of the text and underline it, when a user hovers over a text.

I tried the following and it doesn’t work. I did look for a solution all over the internet and I didn’t find any that suited my particular need.

 .container < width: 100px; float: left; background: #e2edf9; overflow: hidden; >.content .content:hover 
**EWR**
 
**NRT**
 

.container < width: 100px; float: left; background: #e2edf9; overflow: hidden; >.content .content:hover

 .container < width: 100px; float: left; background: #e2edf9; overflow: hidden; >.content .content:hover 
**EWR**
 
**NRT**