I'm learning JS right now, and I trying to do the following:
I'm creating an html grid, each cell is marked with a cell class which doesn't give it a background color. When I mark the cell (i.e by clicking), the JS code adds it a colored class, which gives it background color:
.colored{
background-color: black;
}
Now, I'm trying to take it a step forward and give the user control over the background color of the cells by using HTML's input (type color).
I'm getting the color the user picked, and then I want to change the cells background colors - and here is my problem.
I want to get the css rule for colored class and change it to the value supplied by the user.
I tried changing it by using (colorPicker is the input element):
colorPicker.addEventListener('input', (e) => {
cells.forEach((cell) => {
if(cell.classList.contains('colored'))
cell.style.backgroundColor = e.target.value;
})
})
The above change only the cells which currently have colored class, and not the colored ruleset itself - so the cells which will be marked later won't get the color change.
I've come across ways to change the css ruleset directly by using document.styleSheets, but I'm looking for a more elegant way to change the colored class css.
Is there such a way?
You could implement the same behavior with CSS variables. But instead of changing the style of a specific element you can change the value of the property.
A simple version can be used like so:
const colorPicker = document.querySelector('.color-picker');
colorPicker.addEventListener('input', (event) => {
// Retrieve chosen color
const color = event.target.value;
// Overwrite CSS variable
document.documentElement.style.setProperty('--color-red', color);
}, false);
:root {
--color-red: #ff0000;
}
.colored {
background-color: var(--color-red);
margin: 0 0 0.25em;
}
<div class="colored">Am I red?</div>
<div class="colored">Should I be red?</div>
<div class="colored">Red is my color?</div>
<div class="colored">All I want is red?</div>
<div class="colored">Roses are red?</div>
<input type="color" class="color-picker" />
Related
I tried changing text color of my html using javascript . After few tries I realised i cant change the color if i am changing it in css. So basically it means CSS is executed at the end?? and how can i change the color of the text after clicking the button if i am changing it in css as well? Sorry i am new
function changecol()
{
var html=document.body;
html.style.backgroundColor='black';
html.style.color='white';
}
Expected all the lines in my html to turn white but only those where i have not applied css became white
This is a jquery approach, that will change your color on button click:
$("#butt").on("click",function(){
$(".color").css("background-color","red");
$(".color").css("color","white");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="color">HALLO</div>
<button id="butt">Change Color</button>
You are probably dealing with an inheritance problem. In your case, you are putting a style on the body, and the only elements that inherit styles from the body are ones without their own style. To solve this, I recommend applying the style directly to each element.
Try this:
function changecol(){
document.body.style.backgroundColor='black';
document.body.style.color='white';
// change background color of each element
var elements = document.querySelectorAll('*');
for(let i=0;i<elements.length;i++){
elements[i].style.backgroundColor='black';
elements[i].style.color='white';
}
}
I am trying to make my website so the user can input a color using a color selector, and then it changes the background color to that. This is what I have so far:
function color_change() {
alert("I will make it the color you have choosen.")
var back = document.getElementById("color")
var new_color = document.getElementById("change").value
// What goes here?
}
#color {
background-color: #FFFFFF;
}
<HTML>
<div id = "color">
Change the Color
<br>
<input id = "change" type = "Color">
<button onclick="color_change()">Make it this color!</button>
</div>
</HTML>
I tried that but all it does is come up with an error. Does anyone know how to make it work? I want it to have the user input a color by clicking the box. When they click the box, a Color Picker opens. Then, when they click the Make it this Color! button it will set the background of the div to the color they put in.
You need to set the background colour of the color div element to the newly selected colour. You have correctly managed to retrieve the colour value from the colour input element and stored it in the new_color variable.
You can apply CSS styling options to an element via the style object. This exposes the Stylesheet and the CSSStylesheet interfaces for you to manipulate. It can both get and set styles. In your case, you would like to set the background colour of an element. So you have to get the element with javascript which you have already done and then access the style object followed by the backgroundColor property which you can then set equal to the colour value of the colour input element:
document.querySelector("#color").style.backgroundColor = "{any css colour value}"
Below is adjusted snippet utilising this.
function color_change() {
alert("I will make it the color you have choosen.")
var back = document.getElementById("color")
var new_color = document.getElementById("change").value
// Apply background color to div#color element
back.style.backgroundColor = new_color;
}
#color {
background-color: #FFFFFF;
}
<div id="color">
Change the Color
<br>
<input id="change" type="color">
<button onclick="color_change()">Make it this color!</button>
</div>
You can read more about the style object and what it can do here.
I have a different font colors in my th tags in html table in which I do want to have my function align the data vertically, but when I transforms the data to be Vertical, I LOSE that font color.
Could have 12 different font headers dynamically generated from the database
Fiddle:
http://jsfiddle.net/bthorn/y8ct6b5u/
<table class=mytable>
<th class=vertical bgcolor=#C0C0C0 align=center> <font color=#FF0000 size=2> Test this out</font>
</th>
</table>
Note:
Font color can be something other tha "#FF0000"
Could be #FFFFFF or #000000 or whatever ... thus I NEED to capture it.
Someones fiddle that I forked:
Someone else tried to say to do
newInnerDiv.css("background-color");
When I said that I do not want the code to be hard coded with their first/second answer of
newInnerDiv.css("color", "red");
http://jsfiddle.net/bthorn/p1w73oyj/
Just add a CSS class to the table which contains the style attributes. As a general rule of thumb, you should never use HTML attributes like color and bgcolor. HTML is there to tell the browser what to show; how to display it (colours, sizes, formats, etc.) is CSS' task.
Here's a working fiddle: https://jsfiddle.net/gb4pxfx5/1/.
Notice that I've created a CSS class called mytable which keeps the background and text colors, and since the class is kept upon transformations, the text color remains the same:
table.mytable {
background-color: #C0C0C0;
color: #FF0000;
}
Edit: if you want to change the style dynamically, you can either use jQuery's css() method or switch between predefined CSS classes. Here's an example of the latter, from https://jsfiddle.net/9f73zmb2/:
var changeColor = function()
{
table.removeClass(curr_class);
curr_class = curr_class === 'red' ? 'orange' : 'red';
table.addClass(curr_class);
window.setTimeout(changeColor, 1000);
}
changeColor();
I am a javascript beginner. I am working in indesign CS6. I have assigned paragraph and character styles to all the fonts being used throughout my document. Using character styles I have changed the color of some type to be purple. The purple text is being used to call specific attention to that text. However I want to be able to toggle on and off the purple text. When I toggle off the purple I want the text to change to gray. I do need to be able to change it back to purple as well. Is there anyway to do this using script?
Thank you!
You can create a dedicated swatch and change its color components to fit your taste.
All references e.g. from within styles will follow.
// assuming the swatch is already created
var swatch = app.activeDocument.swatches.itemByName("purple");
swatch.properties = {model:1886548851, space:1129142603, colorValue:[0, 0, 0, 30]};
The following script changes the internal color setting of the specified character style, from a 'purple'-named swatch to a 'grey'-names swatch, and vice-versa.
var myDoc = app.activeDocument;
var charStyle = myDoc.characterStyles.item('My Character Style');
var purple = myDoc.colors.item('purple');
var grey = myDoc.colors.item('grey');
if (charStyle.fillColor == purple)
charStyle.fillColor = grey;
else charStyle.fillColor = purple;
If it's set to Purple then it changes to Grey, and if it's set to Grey it changes to Purple.
(change the swatch names and character style to suit your needs)
you can try this :
http://forum.jquery.com/topic/toggle-change-row-color
try to create a class for your "purple text" , and add/remove the class to change the colors.
there is a similar question at this link :
How do you toggle links to stay a certain color until clicked again
I'm trying to create a simple theme system here. I have few elements with red background color. I also have a button that will change the elements background color to green.
I'm trying to code but I couldn't figure out how can I select and change the bg color of all red elements to green!
For example, I have 4 divs. Two of these have a red header, and when I click the button these headers background color must be changed to green. It's Ok here, but the problem is that the divs are dynamically generated, so do I have do loop all the page to find the red bg color? Could someone enlight me? =)
Thanks a lot! =)
I think the best solution would be to use different stylesheet for each theme and keep the current theme value in SESSION or COOKIE or just pass it as URL argument. But that would be a server side solution.
On Client side, you can just use different classes for each theme and toggle them on the button push event using .toggleClass()
$('.green').toggleClass('red green');
The easiest way to do this would be to have a specific CSS class for each background color you're using. ex:
.color-red{ background-color: #FF0000; }
.color-green{ background-color: #00FF00; }
Once you do that you can select on the CSS class as well as set the CSS class:
$('#button-togreen').click(function(){
$('.color-red').removeClass('color-red').addClass('color-green');
}
It's kind of a round-about way of doing it, however there is no easy way to select on a CSS attribute (to do that you'd have to select all elements of the page and then check each one of them for the background color attribute which would be scarily inefficient...)
I don't know what you mean by headers, but I think this should do what you want:
$('.myDivs').filter(function(index){
return $(this).css('color') == 'red';
}).css('color', 'green');