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);
Related
I have a JavaScript parameter object with some HTML content in the following structure.
function (type, content, title) {
// Replace code should go here
options = {
"data-onclick": null;
"data-progress": false;
}
}
The content of the content object looks as follows:
<div id=content data-onclick="onclickValue" data-progress="true"></div>
I would like to read out the data- parameters from the HTML div and assign them to replace the same named function in the JavaScript function.
All of this should happen at the top of my JavaScript function and replace the properties in the same function.
Thanks for any help or pointers how to achieve this, I am not very skilled at JavaScript.
// first select the html element
var element = document.getElementById('content');
// use the getAttribute('attribute-to-get') method to get your attributes
var options = {
'data-onclick': element.getAttribute('data-onlick'),
'data-progress': element.getAttribute('data-progress')
};
// consider using a hidden input field rather than hiding the element with css
// this is best practice
<input type="hidden" id="content" data-onclick="onclickValue" data-progress="true" />
What I would do (assuming jQuery):
create an invisible div in your html
set the innerHTML of the div
set the attributes from those of the invisible div to your object:
$("#invisible").html(content);
options["data-onclick"] = $("#invisible").find("#content").attr("data-onclick");
options["data-progress"] = $("#invisible").find("#content").attr("data-progress");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="invisible" style="display: none;">
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;
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);
I am using following code:
...
<div id="divcontainer1">
...
<div id="divcontainer2">
...
</div>
</div>
...
Now, I want change "divcontainer2" at a later point of time in the Div "divcontainer3".
What is the right way to check is exist divcontainer2 and when true,
change in divcontainer2 width javascript ?
Thank you,
Hardy
It is probably not nest practice but you can do this by changing the .outterHTML of the element. You would likely want to improve on this but here is a quick example. The last line checks if div 2 exists.
var div2 = document.getElementById("div2");
var html = div2.outerHTML;
var idx = html.indexOf(">");
var newtag = html.substring(0, idx).replace("div2", "div3");
div2.outerHTML = newtag + html.substring(idx, html.length - 1);
var contents = document.getElementById("div3").innerHTML;
alert(document.getElementById("div2") != undefined);
All you do is
get the element .outterHTML
get the substring representing the tag.
Replace the text that defines it
Set the .outterHTML tag to our new string
Now you have a newly named div that keeps all of its attributes, position in the parent and content.
The alert line is how you check for the existence of an object.
I don't believe that there is a "proper" way to do this, however I would store the contents of divcontainer2 in a variable, and then do something like this
var containerOfDivContainer2 = document.getElementById("containerofdiv2");
containerOfDivContaier2.innerHTML = "<div id='divcontainer3'>"/* insert div contents */+"</div>";
Of course, this requires you to put divcontainer2 in a div called containerofdiv2 but it works.
If using jQuery, this will do it:
$('#divcontainer2').attr('id','divcontainer3');
But you shouldn't be changing IDs. Use classes instead and then use the jQuery's toggleClass() function, like:
<div id="divcontainer1">
...
<div id="divcontainer2" class="style1">
...
</div>
$('#divcontainer2').toggleClass("style1 style2");
I'm making a little app, which has to append 3 elements to another element, by using this code:
var MyElem1= document.createElement("div");
ParentElem.appendChild(MyElem1);
This works just fine, but i was wondering if there is a way to create a full element, like this for example:
var MyElem1= document.createElement('<div style="some-styling: here;">Some InnerHtml Here</div>');
ParentElem.appendChild(MyElem1);
I know i can add those properties to the element after i create it, but i'm hopping there's a way to do it inline like that (Something that works cross-browser).
I saw on W3Schools (yes i know i should stop using it) the createElement function requires only the element type (div, span, button, etc...).
You could create a dummy container and create all elements you want inside it by replacing its innerHTML property, and then getting the .firstChild.
Here is a reusable function for it
var elementFactory = (function (){
var dummy = document.createElement('div');
return function(outerHtml){
var node;
dummy.innerHTML = outerHtml;
node = dummy.firstChild;
dummy.removeChild(node);
return node;
}
})();
and use it like this
var MyElem1 = elementFactory('<div style="some-styling: here;">Some InnerHtml Here</div>'),
MyElem2 = elementFactory('<div style="some-other-styling: here;">Some Other InnerHtml Here</div>');
Demo at http://jsfiddle.net/5De3p/1/