We Keep Coding

Change the style of an element in an array

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")

How to use js to query shadow dom element in Polymer?

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?

get computed or default style of button and set on a new element

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).

Change CSS rule in class using JQuery

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");

Remove all classes except one

Well, I know that with some jQuery actions, we can add a lot of classes to a particular div:
<div class="cleanstate"></div>
Let's say that with some clicks and other things, the div gets a lot of classes
<div class="cleanstate bgred paddingleft allcaptions ..."></div>
So, how I can remove all the classes except one? The only idea I have come up is with this:
$('#container div.cleanstate').removeClass().addClass('cleanstate');
While removeClass() kills all the classes, the div get screwed up, but adding just after that addClass('cleanstate') it goes back to normal. The other solution is to put an ID attribute with the base CSS properties so they don't get deleted, what also improves performance, but i just want to know another solution to get rid of all except ".cleanstate"
I'm asking this because, in the real script, the div suffers various changes of classes.

Instead of doing it in 2 steps, you could just reset the entire value at once with attr by overwriting all of the class values with the class you want:
jQuery('#container div.cleanstate').attr('class', 'cleanstate');
Sample: http://jsfiddle.net/jtmKK/1/

Use attr to directly set the class attribute to the specific value you want:
$('#container div.cleanstate').attr('class','cleanstate');

With plain old JavaScript, not JQuery:
document.getElementById("container").className = "cleanstate";

Sometimes you need to keep some of the classes due to CSS animation, because as soon as you remove all classes, animation may not work. Instead, you can keep some classes and remove the rest like this:
$('#container div.cleanstate').removeClass('removethis removethat').addClass('cleanstate');

regarding to robs answer and for and for the sake of completeness you can also use querySelector with vanilla
document.querySelector('#container div.cleanstate').className = "cleanstate";

What if if you want to keep one or more than one classes and want classes except these. These solution would not work where you don't want to remove all classes add that perticular class again.
Using attr and removeClass() resets all classes in first instance and then attach that perticular class again. If you using some animation on classes which are being reset again, it will fail.
If you want to simply remove all classes except some class then this is for you.
My solution is for: removeAllExceptThese
Array.prototype.diff = function(a) {
return this.filter(function(i) {return a.indexOf(i) < 0;});
};
$.fn.removeClassesExceptThese = function(classList) {
/* pass mutliple class name in array like ["first", "second"] */
var $elem = $(this);
if($elem.length > 0) {
var existingClassList = $elem.attr("class").split(' ');
var classListToRemove = existingClassList.diff(classList);
$elem
.removeClass(classListToRemove.join(" "))
.addClass(classList.join(" "));
}
return $elem;
};
This will not reset all classes, it will remove only necessary.
I needed it in my project where I needed to remove only not matching classes.
You can use it $(".third").removeClassesExceptThese(["first", "second"]);