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';
}
}
Related
I am trying to apply a grey background color to a div element inside a page.
Thats the one highlighted below:
I am able to apply the background color with the below code in the page onload:
var topBar = document.querySelector("td.top-bar div.top-bar");
alert(topBar);
topBar.style.backgroundColor="#808080";
However, there is a background property that is undoing what I applied:
How can I remove the highlighted "background" property?
I tried topBar.style.background = "".
But it doesnt work.
You are changing other css property. To make it work you have to overwrite background, not background-color. The easiest way is just to do this:
var topBar = document.querySelector("td.top-bar div.top-bar");
topBar.style.background="#808080";
It should works
i am using the angular materiel and i used the md-menu, but i want to change the background color of md-menu from a css file. is there a way to access the md-menu background from the css?
Thank you
The .mdl-menu gets its color from the .mdl-menu__outline class.
Therefore adding this to your css will change the color
.mdl-menu__outline {
background-color: <YOUR-COLOR>;
}
Also, note that a "material-design-lite" Tag also exists. Makes it faster and easier to get help.
I have an element that I want to add multiple inline filter styles on top of at different times.
The code I have now always resets the inline style so that whatever I set last is all that is there.
Here is an example snippet:
$("div").css("-webkit-filter","grayscale(1)");
$("div").css("-webkit-filter","blur(5px)");
.box{background:blue; width:100px; height:100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
You can see that i'm setting grayscale first and at that time it turns black. Then I set blur second, but it erases the grayscale filter and turns it back to blue then it blurs.
I want both grayscale and blur to be applied.
The issue is that you're overwriting the previous style since they both use the same property. Try putting them together in the same statement like so:
$("div").css("-webkit-filter","blur(5px) grayscale(1)");
EDIT: If you need to apply them at different times, try this:
$("div").css("-webkit-filter","grayscale(1)");
$("div").css("-webkit-filter","blur(5px) grayscale(1)");
This will set the grayscale first and then preserve it by reapplying it with the blur effect as well
This will take the current css and append the new stuff.
var $div = $("div");
$div.css($div.css() + "-webkit-filter","blur(5px)");
You may want to add both filters in one line, as you can see here:
https://developer.mozilla.org/en/docs/Web/CSS/filter
Jquery wants to overwrite the css if your setting the same property.
This question also addresses a similar problem, doesn't seem like a very clean solution though.
Don't overwrite css properties, but add to them with jQuery
I haven't worked much with Javascript, but I have a rough idea of how to make an image rollover to another image. I'm trying to make an image that, when moused over, will become a transparent background to a block of text that will occupy the space the image occupied. I've seen lots of tutorials but nothing matching quite that.
Also: is there any way to format this text with css or otherwise? (Like adding padding, line breaks, etc.)
Any help or links to a site where I can figure it out would be greatly appreciated! Thanks!
This fiddle is a pure css implementation that changes the opacity of an image placed in front of the text on hover. To do this I used put the text and image containers both within a container div and set position: absolute so that they overlap. I then change the opacity of the image by using the :hover selector. Since the text is behind the image, it can't be selected. Let me know if this what your looking for, and specify what you would like differently if it isn't :)
If you want the text to stay after the mouseover, you could use javascript to toggle a class on the rollover and add some text. E.g., put an image as the background to a div with some class (e.g., class="solid-image"). When you want to change the element, just change the class (e.g., with myElement.className="translucent-image") and then you can either have text that was previously invisible or you can add text to the div (so long as it doesn't have children) by using the textContent or innerText element. E.g.:
text = "textContent" in document ? "textContent" : "innerText";
myDomElement[text] = "My text here";
And then add an event listener for the appropriate events.
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');