<html>
<head>
<title>Sample</title>
<script>
window.onload = function()
{
alert(document.getElementById('div1').style.zIndex);
alert(document.getElementById('div2').style.zIndex);
}
</script>
<style type="text/css" media="screen">
#div2
{
z-index: 1;
}
</style>
</head>
<body>
<div id="div1" style="z-index:1"></div>
<div id="div2"></div>
</body>
The outcome of the above code is "1" for the 1st alert, and nothing for the 2nd.
How come i can't set the z-index of "div2" via CSS?
Thanks.
1: it is set, but JS cant determine it if it's not set inline
2: it would'nt have any effect, if the object is not positioned(as gulbrandr posted)
regarding to 1.
If it's not set inline(or by javascript), you can retrieve it using currentStyle or getComputedStyle what gives you the currently applied style.
From W3Schools.com:
z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)
The .style.* set of properties map directly on to properties set via the style attribute, not those which are cascaded from a proper stylesheet.
To find the computed z-index, you need to use getComputedStyle
Related
Recently I came across a very weird issue. When you add more than one style element and if you add title attribute on style element with different value assigned in title. Only the first style element css gets applied.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
<style title="Id-1">
h1{color:red}
</style>
<style title="Id-2">
h2{color:blue}
</style>
</head>
<body>
<h1>Hello Red Heading!</h1>
<h2>Hello Blue Heading!</h2>
</body>
</html>
Now if you see in above simple HTML code. Following are possibilities of this code working-
When no title attribute is added - It works.
When title attribute is added with same value or no value - It works.
When we assign different value in title attribute as shown in code only the first style element css gets applied i.e. h1 becomes red but no effect on h2.
On solution is to use data- to mark title as custom attribute or data attribute.
I am more interested in knowing what is the reason behind this behavior.
To see it in action I have created a plunkr you can visit here
It's because title on <style> is used to provide different subset of styles. Documentation
So basically going to View > Page Style you will see id-1 and id-2:
From documentation:
Any stylesheet in a document falls into one of the following categories:
Persistent (no rel="alternate", no title=""): always applies to the document.
Preferred (no rel="alternate", with title="..." specified): applied by default, but disabled if an alternate stylesheet is selected. There can only be one preferred stylesheet, so providing stylesheets with different title attributes will cause some of them to be ignored.
Alternate (rel="alternate stylesheet", title="..." must be specified): disabled by default, can be selected.
This question already has answers here:
Get a CSS value with JavaScript
(8 answers)
Closed 2 years ago.
console.log(document.querySelector(".green").style.backgroundColor);
// gives an empty string as a result in console
.green {
width: 200px;
height: 200px;
background-color: green;
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="src/styles.css">
</head>
<body>
<div class="green"></div>
<script src="src/index.js">
</script>
</body>
</html>
I know that I can also use
window.getComputedStyle(document.querySelector(".green")).backgroundColor;
which is mentioned in this answer
but I want to know the reason behind this that why it is giving an empty string as a result.
.style contains only inline styles (set via that property, or the HTML attribute with the same name). It's not affected by style sheets at all. getComputedStyle gets you the current effective value for that property, regardless of where it came from.
You want the computed element style:
console.log(getComputedStyle(document.querySelector(".green"), null).getPropertyValue("background-color"));
As is stated in the MDN Page for the element.style property:
The style property is used to get as well as set the inline style of an element.
Your element does not have a style attribute in which the background color is set-- as such, <yourelement>.style.backgroundColor returns an empty string. This is why getComputedStyle exists-- to allow you to interrogate the actual final/applied styles on an element, not merely those that might be inline on the element as a style attribute.
For example:
I have a page and the code is:
<!DOCTYPE html>
<html>
<head>
<style>
.wrap a {
color: red;
}
</style>
</head>
<body>
<div class="wrap">link</div>
</body>
</html>
And I have a common JavaScript component which will load a CSS file include the code below:
.wrap .link { color: blue; }
Then the link will change from red to blue.
Use iframe can fix this but cause another problem same like display two scrollbar or the lightbox overlay just in part of the page.
I can not change the CSS but I can write a JS loader so do you have some idea to fix this?
If a selector matches then a rule will apply until overridden by a rule (which sets the same property) further down the cascade.
You can either change your selectors to stop them matching the elements you don't want them to match, or you can override all your rules in that section.
Therefore, you'll have to adapt your markup and styles. You can precede every selector with #wrapper. For example, if a rule says a{color:red}, substitute that with #wrapper a {color:red;}.
HTML5 allows scoped stylesheets, but only Firefox supports it so far. However there is a you may try a jQuery solution: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin.
Hope it helps.
This might help you.
function changeColor(){
jQuery(".link").css('color','blue');
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.wrap a {
color: red;
}
</style>
</head>
<body>
<div class="wrap"><a href="#" class="link" onclick='changeColor()'>link</a></div>
</body>
</html>
This is a sample of what works:
<html>
<head>
<script type="text/javascript" src="dojo/dojo.js">
</script>
<script language="javascript" type="text/javascript">
require(["dojo/dom","dojo/fx/Toggler","dojo/topic","dojo/domReady!"],
function(dom,Toggler,topic){
var toggler = new Toggler ({
node: "test"
});
alert("something");
toggler.hide();
});
</script>
</head>
<body>
<div id="test">This is just a test.</div>
</body>
</html>
And when I add display: none to my div (and using toggler.show()), it stops working. This is a sample of what does not work:
<html>
<head>
<script type="text/javascript" src="dojo/dojo.js">
</script>
<script language="javascript" type="text/javascript">
require(["dojo/dom","dojo/fx/Toggler","dojo/topic","dojo/domReady!"],
function(dom,Toggler,topic){
var toggler = new Toggler ({
node: "test"
});
alert("something");
toggler.show();
});
</script>
</head>
<body>
<div id="test" style="display:none">This is just a test.</div>
</body>
</html>
Question:
Why is this happening?
Is there something fundamentally wrong with the way I am using dojo or its toggler module?
What is the alternative to toggler (if any), which I can use with display: none?
Note:
I have checked various possibly duplicate links but they all provide workarounds as mentioned below:-
Using dojo.style("test","display","") works, but in complex projects it messes with the alignment etc.
Removing display:none or replacing it with visibility: hidden is not an option for me. It works, but I would like to avoid workarounds if an actual solution exists.
The Toggler Animation uses the fadeIn and fadeOut functions to change the visibility of the Node. which in-turn updates the opacity of the node. which means, node is still there, its just not visible.
You setting the display to none does not update when you use the Toggler to show. Also, setting the display property allows other node to occupy the place held by current node.
So, you need to decide what is that you want. whether you want to use Toggler or use dojo.style. You you wish to continue with Toggler, then instead of display you need to set the opacity to 0.
Hi I have one hidden div and inside it i have visible span. I want to alert some text if span does not have display none property.
<head>
<script type="text/javascript">
$(function() {
if($('span').is(':visible')){
alert(0)
}
})
</script>
</head>
<body>
<div class="fa" style="display:none">
<span>sdf</span>
</div>
</body>
According to jQuery API
Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.
Your <span> is a child of a <div> that's hidden with display: none - that means neither the <div>, nor the <span> consume any space in the document.
Which means that your <span> is hidden and your script has no errors - it does exactly what it suppose to do.
The reason your alert doesn't fire is that your span isn't visible. The fact that it is contained within an element that has display: none means that it will not be shown. If you specifically want to check if it is display: none itself, use css.
if($('span').css('display') != "none"){
alert(0)
}
You don't import jQuery.
Add this in your head element :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
Note that an HTML file must also have HTML opening and closing elements, and preferably a doctype. The following file works :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
if($('span').is(':visible')){
alert(0)
}})
</script>
</head>
<body>
<div class="fa" style="display:none">
<span>sdf</span>
</div>
</body>
</html>
And it does nothing, as your span is in a not displayed div.
Now, if you want to precisely know if your element does't have the style display=none set directly on it, test it like this :
if ($('span').get(0).style.display!='none') {
Demonstration
Your problem is that the div containing the span element has display:none as property, try this Fiddle, you just put display:hidden instead of none and the JS works.
<div class="fa" style="display:hidden"><span>sdf</span></div>