How to dynamically apply CSS filters? I have tried the following for Chrome.
image.style = "-webkit-filter: brightness(50%);";
You should set value to the webkitFilter property, not to the style object. This syntax will work:
image.style.webkitFilter = "brightness(50%)";
If you don't know JavaScript property name, you can reference it by CSS property (like karaxuna suggested, will work too):
image.style["-webkit-filter"] = "brightness(50%)";
image.style["-webkit-filter"] = "brightness(50%)";
Add that filter to a class:
.bright {
-webkit-filter: brightness(50%);
}
And toggle that class:
image.classList.toggle('bright');
1) Check if browser supports css-filters (if needed)
2) Detect if "filter" property needs vendor in current browser and save it
3) Set filter value in format:
el.style["-vendor-filter"] = value;
or
el.style.vendorFilter = value;
Check small demo for it: http://codepen.io/malyw/pen/EDnmt
Also you can find large demo showing css filters in action: http://malyw.github.io/css-filters/
Related
I am using the elem.style object to add inline styling to an element. Which property to change varies and therefore is set dynamically. This, however, does not work. If I e.g. change it to elem.style.listStyleType or any other non-dynamically set property it does work.
The property is passed as a string so I already tried to remove the quotes from the string but that does not work either. Thanks for any help.
HTML:
<div class="example_cnt doc_widget_cnt" onchange="docWidget(event, this, 'listStyleType')">
JS:
var docWidget = function(evt, elem, cssPropVal){
if(evt.target.tagName === 'INPUT'){
var labelText = evt.target.parentElement.textContent;
elem.lastElementChild.style.cssPropVal = labelText;
}
}
Have you tried?
elem.lastElementChild.style[cssPropVal] = labelText;
In the code included below, the script is toggling a div on and off. The .style
code, controls the background color of the the parent element of the div being toggled
on and off. The code works in Opera but not in Chrome, and I haven't been able to
research (search) a solution.
I can of course move on and write other code and achieve what I need, but this has my
curiosity up now.
function CheckOutOpn(){
var Inny = document.getElementById("RightPaneASxOrderForm");
MVxCheckOutForm();
CDxButtonOpnChkOut();
MVxCLOSExBttnChkout();
Inny.style = "background-color:#332223;";
}
function CLOSExCheckOut(){
var Inny = document.getElementById("RightPaneASxOrderForm");
MVxButtonOpnChkOut();
CDxCLOSExBttnChkout();
CDxOrderFormItself();
Inny.style = "background-color:#33B32E;";
}
I think you should be using:
Inny.style.backgroundColor = "#332223";
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style
... Except in Opera, styles can not be set by assigning a string to the
(read only) style property, as in elt.style = "color: blue;". This is
because the style attribute returns a CSSStyleDeclaration object.
If you want to set the style of an element textually, you need to use either
Inny.style.cssText="background-color:#33B32E"
or
Inny.setAttribute("style","background-color:#33B32E")
or you can set the properties directly:
Inny.style.backgroundColor = "#33B32E";
I think this will work for you fine. only mistake you are doing is, when you are adding the css properties to the element.
function CheckOutOpn(){
var Inny = document.getElementById("RightPaneASxOrderForm");
MVxCheckOutForm();
CDxButtonOpnChkOut();
MVxCLOSExBttnChkout();
Inny.style.backgroundColor = "#332223";
}
In this example Chrome sets the background red, firefox and IE do not.
Trying:
document.getElementById("firefoxDiv").style['backgroundColor'] = "Red";
and
document.getElementById("firefoxDiv").style['background-color'] = "Red";
I would much rather be able to use the same syntax used in external CSS
background-color vs inline using javascript .style.backgroundColor =
Thanks for your help!
Note: NO jQuery please.
Use .style.setProperty(propertyName, value [, priority]) instead of an expando property.
Example:
document.getElementById("firefoxDiv").style.setProperty('background-color', 'red');
Is it in any way possible, to change a css class model using JavaScript?
Pseudo code:
function updateClass(className, newData) {
cssInterface.alterClass(className, newData);
}
className being the name of the class, which is supposed to be changed (like ".footer") and newData being the new class content (like border: "1px solid pink;").
The target is, actually, just to save space: I am working with CSS3-animations, so changing one attribute of an element, which is affected by it's class, will terminate the animation of of it - The (in my case) font size won't change anymore. Using different classes will require an entire new set of classes for all affected elements, I'd like to avoid this.
I am not searching for a change via
element.className = "foo";
or
element.style.fontSize = "15pt";
Thanks for your help, guys :)
Here's my function to do this...
function changeCSS(typeAndClass, newRule, newValue) // modify the site CSS (if requred during scaling for smaller screen sizes)
{
var thisCSS=document.styleSheets[0] // get the CSS for the site as an array
var ruleSearch=thisCSS.cssRules? thisCSS.cssRules: thisCSS.rules // work out if the browser uses cssRules or not
for (i=0; i<ruleSearch.length; i++) // for every element in the CSS array
{
if(ruleSearch[i].selectorText==typeAndClass) // find the element that matches the type and class we are looking for
{
var target=ruleSearch[i] // create a variable to hold the specific CSS element
var typeExists = 1;
break; // and stop the loop
}
}
if (typeExists)
{
target.style[newRule] = newValue; // modify the desired class (typeAndClass) element (newRule) with its new value (newValue).
}
else
{
alert(typeAndClass + " does not exist.");
}
}
Called with (example)
changeCSS("div.headerfixed","-moz-transform-origin", "100% 0%");
hope this helps.
See my answer here. To answer your question: Yes, it's possible.
#CSS3: I tried exactly the same in one of my html5 experiments. I created an extra <style> element, and changed its contentText to the CSS class definitions I needed. Of course changing the cssRule object would be much cleaner :-)
As far as I can tell the CSS object model cannot easily tell you whether you already have an existing style rule for a particular class, but you can easily append a new rule for that class and it will override any previous declaration of that style.
I found an example of creating dynamic stylesheets.
You should take a look at dojo, it has some nice features where you can do just that..
require(["dojo/dom-class"], function(domClass){
// Add a class to some node:
domClass.add("someNode", "anewClass");
});
http://dojotoolkit.org/reference-guide/1.7/dojo/addClass.html
On a php generated page there are several elements like this:
<td class="defaultTDStyle" style="color:userDefinedCustomColor" id="myTDId"></td>
So there is a default style and I apply several extra styles that override the style defined in the CSS.
Is there a way to remove these added styles from javascript?
It seems the obj.style.color="default" and obj.style.color="auto" don't work. How can I reset the color to the CSS default from javascript?
If recollection serves, obj.style.color="" should work... I don't know if it's right though.
Set the style property values to the empty string:
obj.style.color = "";
The new way:
el.attributeStyleMap.delete('color')
or clear everything:
el.attributeStyleMap.clear()
Not all browsers support this yet though. See StylePropertyMap on MDN for more details and browser compatibility.
See also CSS Typed Object Model and Working with the new CSS Typed Object Model.
You could save the attribute style before overriding it, and then apply it again. Like this:
// Get element styling
const element = document.getElementById('someId');
const style = element.getAttribute('style');
const classList = element.classList;
/** Code for overriding element styling goes here **/
// Retrieve original styling
const newClassList = element.classList;
for (let item of newClassList)
element.classList.remove(item);
for (let item of classList)
element.classList.add(item);
element.setAttribute('style', style);