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.
Related
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?
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>
The thing is for js purpose I want a particular <style> tag to be removed from my document on an event. So for that, within my knowledge, I have added a class for it and removed on my event, eg:
<style class="custome_for_remove">
.selected_par>td,
.footer-tr>td {
position: relative;
display: table-cell!important
}.....
</style>
<script>
function customeRemove() {
$('.custome_for_remove').remove()
}
</script>
My concern is this HTML standard, is this a proper method.? I couldn't find any questions or answer related to this.
Yes! This totally works and it also seems to be valid syntax. Here's a little demonstration. According to https://validator.w3.org/ having a class in your style tag is considered valid html (you can also use an id if you want).
$("#test").click(() => {
$(".customClass").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style class="customClass">
p {
color: red;
}
</style>
<p>
Test
</p>
<button id="test">
remove
</button>
You can try the below code. It removes CSS perfectly.
function removeJs(){
$(".custome_for_remove").remove();
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<style class="custome_for_remove">
p {
color: red;
cursor: pointer;
}
</style>
<p onclick="removeJs()">
Click here!
</p>
I'm trying to use ShadowDomv1 (with https://github.com/webcomponents/webcomponentsjs and https://github.com/webcomponents/shadycss) but it's not working.
The ShadowDom by itself works, but the css is not encapsulated (as we can see with the h2 css rule).
It works as intended on Chrome and Safari (but they both support ShadowDomv1 natively).
Am I missing something or is it impossible ?
Here the jsbin : http://jsbin.com/maqohoxowu/edit?html,output
And the code :
<script type="text/javascript" src="https://rawgithub.com/webcomponents/webcomponentsjs/master/webcomponents-hi-sd-ce.js"></script>
<style type="text/css">
h2 {
color: red;
border-bottom: 1px black dotted;
}
</style>
<h2>h2 red and dotted</h2>
<my-element>
</my-element>
<template id="myElementTemplate">
<style scope="my-element">
h2 {color: blue}
</style>
<div>
<h2>h2 blue and not dotted !</h2> <!-- Should not be dotted because of the encapsulation -->
</div>
</template>
<script type="text/javascript">
ShadyCSS.prepareTemplate(myElementTemplate, 'my-element');
class MyElement extends HTMLElement {
connectedCallback() {
ShadyCSS.styleElement(this);
if (!this.shadowRoot) {
this.attachShadow({mode: 'open'});
this.shadowRoot.appendChild(document.importNode(myElementTemplate.content, true));
}
ShadyCSS.styleElement(this);
}
}
customElements.define("my-element", MyElement);
</script>
You could use the CustomStyleInterface to apply document level styles only to non Shadow DOM:
const CustomStyleInterface = window.ShadyCSS.CustomStyleInterface;
CustomStyleInterface.addCustomStyle(document.querySelector('style.doc-level'));
class MyElement extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(document.importNode(myElementTemplate.content, true));
}
}
customElements.define("my-element", MyElement);
<script src="https://rawgithub.com/webcomponents/webcomponentsjs/master/webcomponents-hi-sd-ce.js"></script>
<script src="https://rawgit.com/webcomponents/shadycss/master/custom-style-interface.min.js"></script>
<style class="doc-level">
h2 {
color: red;
border-bottom: 1px black dotted;
}
</style>
<h2>h2 red and dotted</h2>
<my-element></my-element>
<template id="myElementTemplate">
<style>
h2 {color: blue}
</style>
<div>
<h2>h2 blue and not dotted !</h2>
</div>
</template>
As per Mozillas platform status page, Shadow DOM is still under development.
https://platform-status.mozilla.org/#shadow-dom
The polyfill can not emulate the encapsulation of CSS that is handled natively by true ShadowDOM.
Instead, if you plan to use both then avoid using simple CSS selectors. Instead try using a CSS naming pattern like BEM: http://getbem.com/introduction/
This will allow your CSS to work, most of the time, in either true ShadowDOM and in ShadyDOM.
I am trying to change a Css file selector class in JavaScript, but the code I am using is not working!
Trying to change this class in my Css -
.block-square {
background-color:rgb(167,128,209);
}
I want to change the background-color in this class.
The css href is here <link id="myStyleSheet" href="css/style.css" rel="stylesheet"> This is where it is located.
Here is my code that is not working:
function styleOne() {
document.getElementById('myStyleSheet').href = 'css/style.css';
var square = document.querySelector(".block-square");
square.style.backgroundColor = "#ffffff";
}
Please let me know why this code is not working.
If you just want to change the background-color of .block-square, here is a sample.
$("#styleOne").click(function() {
$(".block-square").css("background-color", "#FFFFFF");
});
$("#styleTwo").click(function() {
$(".block-square").css("background-color", "rgb(167,128,209)");
});
.block-square {
width: 100px;
height: 100px;
background-color: rgb(167, 128, 209);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-square"></div>
<button id="styleOne">StyleOne</button>
<button id="styleTwo">StyleTwo</button>
Use jQuery, it is much easier.
function styleOne() {
$(".block-square").css("background-color","yellow");
}