I know how to query shadow dom element in <style> tag,but i want to use data-bind dynamically change the style,data-bind can not be applied in <style> in Polymer,so i should make it happen in js.For example,i use core-scroll-header-panel component, i can query its background style using:
<style>
core-scroll-header-panel::shadow #headerBg {
background: #5cebca;
}
</style>
but how can implement it in js?
Here's the way to select your element:
var shadow = document.querySelector('core-scroll-header-panel').shadowRoot;
var header = shadow.querySelector('#headerBg');
Note that it will return one single element. If you need to loop over multiple element you may use querySelectorAll as you probably know.
You can then change your background color as normal:
header.style.backgroundColor = "#5cebca";
However, changing a color in directly in JavaScript is not adviced and you should use CSS for that.
header.className = "my_css_class";
Note that it will return one single element. If you need to loop over multiple element you may use querySelectorAll as you probably know.
I have tried it out :
document.querySelector('core-scroll-header-panel::shadow #headerBg');
and is there any else solutions?
Related
how can I change the style of an element in an array? I've hidden the class "testimonial" in CSS before, now I want to display a single element of that class. I'm searching for something like this:
let test= document.getElementsByClassName("test");
test[0].style.visibility = "block";
You are right, only should use the correct css property (it's maybe the display:block, in javascript HTMLElementNodeList[<indexOfElement>].style.display="block")
I am working on a project where i have define Custom html elements and give them a style.
I am trying to create a button with default style and take computed style of button and set it to another custom element, with button active and hover effects.
but its not work for me.. is any buddy have solution or idea ?
here my code :
var A_btnfake = document.createElement('button');
cS = document.defaultView.getComputedStyle(A_btnfake, null);
A_btn = document.createElement('custbtn');
A_btn.style=cS;
some_elm.appendChild(A_btn);
//i don't want to define each style one by one,like : A_btn.style.background = cS.backGround
Is there any way to define all style at once .
A_btn.style=cS;
The style property is read-only - you cannot assign a completely new CSSStyleDeclaration object to an element, only get its (probably element-tied) one.
If you want to copy a style to another, you will have to do it property-by-property:
for (var prop in cS)
A_btn.style[prop] = cS[prop];
You need to do this via CSS, especially if you want to inherit the :active and :hover states. And it’s really easy, just add the new element to the selector list, f.ex:
button,
custbtn { color: yellow; }
Note that in some older versions of IE, you need to virtually add new custom elements in order to be able to target them via CSS (same goes for HTML5 elements).
I have a class in CSS
.Foo
{
width:20px;
}
Using Jquery I would like to do something similar to this on an event:
$(".Foo").css("width", "40px");
This doesn't work. Is this the wrong approach? Should I use addClass() and removeClass()?
EDIT: I figured out my problem. This command does in fact work. In my particular application I hadn't created the elements using the class before I used the command, so when they were created nothing was changed.
Basically this command doesn't change the CSS style rule, just the elements using the class.
You can change a CSS style rule. You need to look at:
document.styleSheets collection
styleSheet.cssRules property (or styleSheet.rules for IE7 and IE8)
rule.selectorText property
rule.style property
For example:
var ss = document.styleSheets[0];
var rules = ss.cssRules || ss.rules;
var fooRule = null;
for (var i = 0; i < rules.length; i++)
{
var rule = rules[i];
if (/(^|,) *\.Foo *(,|$)/.test(rule.selectorText))
{
fooRule = rule;
break;
}
}
fooRule.style.width = "40px";
Working demo: jsfiddle.net/kdp5V
you could add the styling manually to the header with jquery:
$('head').append('<style id="addedCSS" type="text/css">.Foo {width:40px;}</style>');
then change it on an event like e.g. so:
$(window).resize(function(){
$('#addedCSS').text('.Foo {width:80px;}');
});
jQuery.css will find all existing elements on the page that have the Foo class, and then set their inline style width to 40px.
In other words, this doesn't create or change a css rule -- if you dynamically add an element with the Foo class, it would still have a width of 20px, because its inline style hasn't been set to override the default CSS rule.
Instead, you should use addClass and removeClass and control the styles in your static CSS.
Yes, you should use addClass and removeClass to change the styling. In your css, define a couple of different classes and switch between them.
You should be selecting an element with jQuery. You're aware that you aren't selecting the CSS class itself, correct?
Once you have an element with class="Foo", you can select it as you have, and either set css properties manually like you're trying to do, or you can use add class like so:
$(".Foo").addClass('Foo');
Granted of course, since you're selecting the same class that you're adding, it doesn't really make sense.
I got thsi example in CSS api help in JQuery API.
this worked for me : http://jsfiddle.net/LHwL2/
for complete help read the css api at http://api.jquery.com/css/
Try using multiple styles
.FooSmall
{
width:20px;
}
.FooBig
{
width:40px;
}
$('#theTarget').removeClass('FooSmall').addClass('FooBig');
This may work for you.
$(".Foo").css("width", "40px");
How to add style=display:"block" to an element in jQuery?
$("#YourElementID").css("display","block");
Edit: or as dave thieben points out in his comment below, you can do this as well:
$("#YourElementID").css({ display: "block" });
There are multiple function to do this work that wrote in bottom based on priority.
.css()
Set one or more CSS properties for the set of matched elements.
$("div").css("display", "block")
// Or add multiple CSS properties
$("div").css({
display: "block",
color: "red",
...
})
.show()
Display the matched elements and is roughly equivalent to calling .css("display", "block")
You can display element using .show() instead
$("div").show()
.attr()
Set one or more attributes for the set of matched elements.
If target element hasn't style attribute, you can use this method to add inline style to element.
$("div").attr("style", "display:block")
// Or add multiple CSS properties
$("div").attr("style", "display:block; color:red")
JavaScript
You can add specific CSS property to element using pure javascript, if you don't want to use jQuery.
var div = document.querySelector("div");
// One property
div.style.display = "block";
// Multiple properties
div.style.cssText = "display:block; color:red";
// Multiple properties
div.setAttribute("style", "display:block; color:red");
Depending on the purpose of setting the display property, you might want to take a look at
$("#yourElementID").show()
and
$("#yourElementID").hide()
If you need to add multiple then you can do it like this:
$('#element').css({
'margin-left': '5px',
'margin-bottom': '-4px',
//... and so on
});
As a good practice I would also put the property name between quotes to allow the dash since most styles have a dash in them. If it was 'display', then quotes are optional but if you have a dash, it will not work without the quotes. Anyways, to make it simple: always enclose them in quotes.
If you are using BS5 and Tabulator I found that I had to add position: static to the cell AND add it to the button.
So, I added the following CSS:
.table-responsive .dropdown,
.table-responsive .btn-group,
.table-responsive .btn-group-vertical {
position: static;
}
and on the Tabulator div I have:
<div id="myTable" class="table-sm table-responsive"></div>
and finally on the event I do:
myTable.on("dataProcessed", function(data){
$('[tabulator-field="my_fancy_field"]').css("position", "static");
});
You will need some way of finding the right cell. I used the field that I am loading the data from.
I then end up with (on most rows) something that looks like this:
And on the last row it pops upwards like this:
I need to change more than one style attribute for a given element. I know how to change one: document.getElementById(today).style.visibility= "visible";
but am unsure of the syntax for changing more than one e.g. visibility,width, height and font-color.
It's just multiple calls:
document.getElementById(today).style.visibility = "visible";
document.getElementById(today).style.color = "red";
document.getElementById(today).style.height = "5em";
If you are willing to replace any other inline styles for that element you can use the style.cssText property.
document.getElementById('idstring').style.cssText=
'font-size:1em;color:blue;visibility:visible';
You need to reference each attribute one at a time, i.e. .style.width=, .style.height=, etc.
You could shorten the amount of typing you do a bit like so:
var g = document.getElementById(today);
g.style.width=100;
g.style.height=100;
g.style.visibility='visible';
CSS way would be to create a class that does all the styling common to those elements and assign the class attribute to them,
alternatively, if they are inhertiable styles then put the elements in a common parent say div and set the div's style