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;
Related
The problem is when I try to create custom element this way
var el= document.createElement('my-el');
el.setAttribute('tag-model', "[[myBinding]]");
it creates element without its attributes. How to construct custom element with all its attributes and then append to HTML to initilize them?
Thank you!
See this
It basically says to do it like that:
var dynamicEl = document.createElement("my-element");
dynamicEl.setAttribute("id", "my-element-id");
dynamicEl.setAttribute("greeting", "Hello, Good Morning.");
document.body.appendChild(dynamicEl);
However, if you want to change properties directly, it wont work with setAttribute. You have to do it like that:
var dynamicEl = document.createElement("my-element");
dynamicEl.greeting = 'Waaazaaaa???';
document.body.appendChild(dynamicEl);
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";
}
I was wondering how you could read and save to a variable the CSS value of a HTML element. For example say you have this:
<tr id="presentationProperty" style="display: none;">
I would want to be able to read the display: none property and save it to a variable inside JavaScript. Is this possible and if so, how?
Easy:
var display = document.getElementById('presentationProperty').style.display;
Globally, you can access to styles properties of an element like this:
var getStyle = function(elementID, prop) {
return document.getElementById(''+elementID+'').style[prop];
};
alert (getStyle('presentationProperty', 'display')); // block
alert (getStyle('presentationProperty', 'position'));
alert (getStyle('presentationProperty', 'backgroundColor'));
// ...
First you need to get the element, and then you can use the style property:
var element = document.getElementById("presentationProperty");
var display = element.style.display;
See here for a full list of available style properties
If you want to read the final style applied to an element, use getComputedStyle(). This includes any style applied to the element, whether it is an external stylesheets, styles defined within the same document, element styles or styles applied by JavaScript.
var elem = document.getElementById("presentationProperty");
var theCSSprop = window.getComputedStyle(elem).getPropertyValue("display");
Try this:
var x = document.getElementById('presentationProperty').style.display;
You can use getComputedStyle() to get applied css value on particular element, something like this.
HTML
<tr id="presentationProperty" style="display: none;">
javaScript
var tr= document.getElementById('presentationProperty');
var computedStyle = document.defaultView.getComputedStyle(tr);
var dispVal = computedStyle['display']
This would more usefule when you appied the css(display) as external or internal css.
You can simply do this:
var el = document.getElementById('presentationProperty');
console.log(el.style.display);
It however will return empty string if the element has no display property defined inside css (i.e. it is inheriting default display property).
Try This for getting all properties:
var css = document.getElementById('presentationProperty').style.cssText;
alert(css);
I'm drawing a div with Javascript and adding various attributes to it as I build it. I can get ids, classes and style attributes working but it just ignores "contenteditable".
var elemText = document.createElement('div');
elemText.className = 'elem';
elemText.style.background = "none";
elemText.id = "elementID";
elemText.contenteditable = "true";
I've also tried
elemText.attributes['contenteditable'] = "true";
Still no joy.
The property is contentEditable (note the capital 'E'). Attributes are set using setAttribute() rather than the attributes collection. So, either of the following will work:
elemText.contentEditable = "true";
elemText.setAttribute("contenteditable", "true");
Have you tried setAttribute?
elemText.setAttribute('contenteditable', true);
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/