Javascript not returning style properties [duplicate] - javascript

This question already has answers here:
How to get an HTML element's style values in JavaScript?
(5 answers)
Closed 6 years ago.
I have a simple script that is getting the color of the text in an element and printing it to the console. However, when I run the script, I'm getting an empty string rather than the actual color. Can anyone explain to me why and how to fix it?
HTML
<div id="scrollingTextHolder">
<p id="scrollingText">Hello</p>
</div>
CSS
#scrollingText{
margin-top: 5%;
color: black;
}
JS
window.addEventListener("load", function(){
console.log(document.getElementById("scrollingText").style.color);
})
Pen

You can use getComputedStyle() and getPropertyValue(), also color is returned as rgb(R,G,B)
var a = document.getElementById("scrollingText");
console.log(window.getComputedStyle(a).getPropertyValue('color'))
#scrollingText {
margin-top: 5%;
color: black;
}
<div id="scrollingTextHolder">
<p id="scrollingText">Hello</p>
</div>

Related

How to modify a CSS class with JavaScript [duplicate]

This question already has answers here:
modify a css rule object with javascript [duplicate]
(2 answers)
Set CSS property in JavaScript?
(11 answers)
Closed 17 days ago.
How can I add a new CSS property to an existing class with JavaScript?
My class:
.messageBox p{
border-bottom: 1px solid #808080;
margin: 2px;
margin-bottom: 1px;
}
I want to add min-height: 17px; to this already existing class.
There are ways for adding this to every element of the above mentioned class but I'm not able to handle later added elements.
Is this even a good approach to change the class or is there a more convenient way for doing this?

How to added hover to a div style [duplicate]

This question already has answers here:
How can I write 'a:hover' in inline CSS?
(24 answers)
Closed 9 months ago.
How can I use a:hover in inline CSS inside the HTML style attribute
like this but doesn't work
<div
style={{
"&:hover": {
background: "#efefef"
},
}} >
</div>
You can do this way.
a:hover {
background-color: yellow;
}
See the full answer here. https://codepen.io/charp95/pen/LYQxZrm
<a href="mypage.html"
onMouseOver="this.style.color='#FFF'"
onMouseOut="this.style.color='#000'" >Whatever you have to display</a>
You can try this, using onMouseOver and onMouseOut, this gives the same effect but it's not efficient for many elements.

Get CSS properties in JS by css class name [duplicate]

This question already has answers here:
How to get a style attribute from a CSS class by javascript/jQuery?
(8 answers)
Closed 2 years ago.
How do I get the CSS properties of an element with js? Let say I have the following
.btn {
background-color: green;
}
.navbtn {
font-size: 20px;
}
and
<button id='mybtn' class='btn navbtn' onclick='alert("hi")'>Click me</button>
Then, I want to extract the CSS properties of the element mybtn. If I do
window.getComputedStyle(document.getElementById('mybtn'))
it returns a CSSStyleDeclaration which contains all CSS properties, even those I didn't set. However, what I want is an object (or whatever) that contains
{
background-color: green;
font-size: 20px;
}
and everything else will consider as 'default'.
So my question is:
Is there such function or library that does the job?
If not, is it possible to get the CSS properties given the class name (like getProperties('btn') returns { background-color: green; })
Thanks in advance
So simple as this code :
let background = document.querySelector('.btn').style.backgroundColor;
console.log(backround);

Jquery vs Javascript: getting css style object shows different result [duplicate]

This question already has answers here:
How To Get Font Size in HTML
(9 answers)
Closed 6 years ago.
I have the following code:
In my html
<h1 id="heading">My Site</h1>
In my css
#heading{
font-size: 16px;
color: #333333;
}
When in console I do
document.getElementById("heading").style.fontSize
it gives: ""
but when I do
$("#heading").css("fontSize")
it gives: 16px
Even if I print the whole style object, vanilla javascript shows all blank values but jquery shows correct results.
Why is there a difference between the two?
Because jQuery's css function gives you the computed style, whereas Element.style.fontSize gives you only styles that have been applied inline. The vanilla equivalent to the jQuery code would be this:
var heading = document.getElementById("heading");
window.getComputedStyle(heading).getPropertyValue('font-size');
This will give you the actual font size of the element, after any CSS has been applied.
document.getElementById("heading").style.fontSize
Will only get styles that are set inline like:
<h1 id="heading" style="font-size:16px">My Site</h1>`
To get the styles set from a stylesheet use getComputedStyle:
window.getComputedStyle(document.getElementById("heading"), null).getPropertyValue("font-size");
With inline styling:
console.log(document.getElementById("heading").style.fontSize)
<h1 id="heading" style="font-size:16px">My Site</h1>
With stylesheet styling
console.log(window.getComputedStyle(document.getElementById("heading"), null).getPropertyValue("font-size"))
#heading{
font-size: 16px;
color: #333333;
}
<h1 id="heading">My Site</h1>

Whats wrong with the .animate() [duplicate]

This question already has answers here:
Animate element transform rotate
(7 answers)
Closed 8 years ago.
What is wrong with this Code?
$("button").click(function(){
var div=$("#oarm2");
div.animate({marginTop:'150px', transform:'skew(15deg, -60deg)'},"slow");
});
When I press the button, an div Element should be go down in the Page and change the Form.
The "marginTop" is functionally, but the transform skew not..
What is wrong? How I must write this?
Check this Demo Fiddle
Js
$("#go").click(function(){
$("#oarm2").animate({marginTop:'150px', transform:'skew(15deg, -60deg)'},"slow"); });
HTML
<button id="go">ยป Run</button>
<div id="oarm2">Hello!</div>
CSS
div {
background-color: #bca;
width: 100px;
border: 1px solid green;
}
Here I include jquery library file jquery-1.8.3.js

Categories