How to figure out what property was applied by which .css or <style> tag?
For example below I have bootstrap.css which applies text color and a <style> which applies border.
const element = document.getElementById("btn");
const cssObj = window.getComputedStyle(element, null);
console.log('From bootstrap.css: ',cssObj.getPropertyValue('background-color'));
console.log('From <style> tag: ',cssObj.getPropertyValue( 'border-color'));
#btn {
border: 3px solid hotpink !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<button id="btn" class="btn btn-primary m-2">BUTTON</button>
How do I figure what's the path of the style file affecting the element?
Chrome Dev Tools does it by showing it in the right corner:
Is there an easy way to find out using JS only without having to parse every <link> and <style> tag?
Related
so I have this HTML code where I hide the body of the website using
<style>
body{
display: none;
}
</style>
<body>
<p>Something..</p>
</body>
but now I want to remove this using Javascript without giving the body an ID or a class. As a solution I've tried the following but it is not working.
document.getElementsByTagName("body")[0].removeAttribute("style");
Any help is appreciated. Thanks.
You can set document.body's display style property to unset:
document.body.style.display = "unset"
<style>
body {
display: none;
}
</style>
<body>
<p>Something..</p>
</body>
If you want to remove the style tags added in your HTML, you have to select it using document.getElementsByTagName and call remove method to its nodes.
Working Fiddle
document.getElementsByTagName("style")[0].remove();
body {
display: none;
}
<p>Something..</p>
If you want to set style to the element
If you just want to set the display style of body tag, you can do this with javascript using.
document.getElementsByTagName("body")[0].style.display
More Generic Solution
const body = document.getElementsByTagName("body")[0];
const targetStyles = {
display: 'block',
}
Object.entries(targetStyles).forEach(([style, value]) => body.style[style] = value);
body {
display: none;
}
<p>Something..</p>
What is the issue with your script?
document.getElementsByTagName("body")[0].removeAttribute("style");
This script selects the body tag from HTML and removed the inline style added to the body. Its will work for below template, but not for your requirement.
document.getElementsByTagName("body")[0].removeAttribute("style");
<body style="background: blue;">
<p>Something..</p>
</body>
I have a below HTML file and when I manually move cursor on the dummy link, it shows me yellow color, as I have added that style on css hover.
Same I would like to simulate with java script.
Here below is the image for reference.
image
Please suggest me how to achieve it?
<!DOCTYPE html>
<html>
<head>
<style>
a:hover {
background-color: yellow;
}
</style>
</head>
<body>
dummylink
<p><b>Note:</b> The :hover selector style links on mouse-over.</p>
</body>
</html>
Use the mouseover and mouseout events:
const a = document.querySelector('a');
a.onmouseover = () => a.style.backgroundColor = 'yellow';
a.onmouseout = () => a.style.backgroundColor = null;
dummylink
I have tried hours to get the results, but failed, below, I will post all I have done, hope I can get some tips, BTW,Thanks.
from the error message, yeah It's cssRules is null, surely error!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<title>css style</title>
<style type="text/css">
#demo {
font-size: 10px; /*first css rule */
}
p {
border: 1px solid green; /*second one*/
}
</style>
</head>
<body>
<div id="demo" style="color: red;">
<p>how to access of document's css!</p>
</div>
</body>
external css
#demo {
font-weight: 900;
}
p {
padding: 20px;
}
Javascript
<script>
/*1,to get the inline style, this maybe the most easy one*/
var cssInline = document.getElementById('demo').style;
var cssInText = cssInline.cssText, cssColor = cssInline.color;
console.log(cssInText, cssColor);
/*2.a to get the style in head*/
var cssInHeada = document.getElementById('demo');
// using the computed css of inline
var cssHeadText = getComputedStyle(cssInHeada, null);
console.log(cssHeadText);
// 2.b to get the style directly
var cssInHeadb = document.getElementsByTagName('style')[0];
console.log(cssInHeadb.textContent);
// 2.c or like this
var cssInHeadc = document.styleSheets[1];
console.log(cssInHeadc.cssRules[0].cssText); //per rule
/*3, but I cant get the extenal style*/
var cssExtenal = document.styleSheets[0];
console.log(cssExtenal.cssRules[0].cssText);
</script>
Thank your guys!
I suspect your JavaScript is running before the stylesheet is loaded. Try this:
document.addEventListener('DOMContentLoaded', function () {
var cssExtenal = document.styleSheets[0];
console.log(cssExtenal.cssRules[0].cssText);
}, false);
Or if you happen to be using jQuery, this is more universal:
$('document').ready(function(){
var cssExtenal = document.styleSheets[0];
console.log(cssExtenal.cssRules[0].cssText);
});
Update: another possibility is that you're using Chrome and either loading the CSS cross-domain or using the file:// protocol. This appears to be a known issue and is not considered a bug.
I have this html document:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="css/main.css" type="text/css" />
</head>
<body>
<h1>Header</h1>
<script>
function removeSheet(href) {
var href;
document.querySelector('link[href="'+href+'"]').outerHTML = '';
}
removeSheet( 'css/main.css');
</body>
</html>
main.css:
body {
background: black;
}
h1 {
color:white;
}
The removeSheet function removes the stylesheet specified, and as expected, the h1 and all other elements lose all styling - but for some reason the body is still coloured black.
After inspecting the document in firebug, it shows that the stylesheet was properly removed from the page - but apparently the body is still inheriting styles from the css file.
Could anyone explain why the body keeps all its css properties, even if the stylesheet containing them is deleted ?
Just learning polymer. I want to grab the color of fixed-header when it is clicked.
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="fixed-header" attributes="height" style="background-color:blue">
<template>
<style>
:host {
display: block;
background-color: red;
}
::content * {
list-style-type: none;
}
</style>
<header layout horizontal on-click="{{changeColor}}">
<content select="li"></content>
</header>
</template>
<script>
Polymer('fixed-header', {
changeColor: function() {
var color = this.style.backgroundColor
console.log(color)
}
});
</script>
</polymer-element>
When I don't use the inline style on polymer-element, I can't use this.style.backgroundColor, even though it is definitely changing color to be red. Why can't I use this.style.backgroundColor when it is just through the template style tag?
Also, I'm trying to set the backgroundColor, but I can't do that either.
Returning an object representation of the contents of a node's style attribute is the expected behavior of the style property. What you want is getComputedStyle():
var color = getComputedStyle(this).backgroundColor;
Here's a working jsbin.
To your second comment, setting style works fine for me in Chrome 36 and 38.