We Keep Coding

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

How to reuse a CSS class, of a webpage, in a created div?

I want to reuse the certain class of CSS style of a webpage to the new Div element that I have added. I am using Greasemonkey to redesign the page.
How can I add bar1 style to myDiv?
Original div:
<div id="bar1" class="bar1">
New Div:
var myDiv = document.createElement('div');

myDiv.className = 'bar1';
or
myDiv.className = document.getElementById ('bar1').className;

Sounds like your end goal is really to make something like a bookmarklet. If you are just looking to add a class you can always just set the "className" on a object since the word 'class' is protected.
http://jsfiddle.net/scispear/tCzZM/
I also threw in something style sheet dynamically (but only for more modern browsers, older browsers require a bunch more work).

Due to CSS inheritance, copying the class name is not enough, unless the new element is a sibling of the other. Even then, CSS3 selectors like nth-child may mess things up.
You should instead iterate over all relevant style properties and copy their computed values like so:
var stylesToCopy = ['color', 'background-color', ...];
var oldStyle = getComputedStyle(bar1);
for (var i = 0; i < stylesToCopy.length; i++) {
myDiv.style[stylesToCopy[i]] = oldStyle[stylesToCopy[i]];
}

Change font after createTextNode()

I need to change the font of element created by the createTextNode() function:
var s = document.createTextNode(item.text);
s.setAttribute("font size") = -1;
elem.appendChild(s);
In my code I get error on Firebug:
s.setAttribute is not a function
How can I change a font of created element?

You don't specify font on text nodes, you do so on the parent element - in your case:
elem.style.fontSize = "20px";
If you don't wish to change the font size for the entire parent element, you can create a <span> element to wrap around the text node:
var span = document.createElement('span');
span.style.fontSize = "20px";
span.appendChild(s);
elem.appendChild(span);

createTextNode creates a Text node that has only one method: splitText. setAttribute is a method of the DOM Core that is implemented by the Element interface (i.e. not text nodes).
Generally, you should avoid setAttribute as it has numerous quirks and setting the related DOM property is faster and more reliable.
In any case, there is no "fontSize" attribute specified in HTML 4.01 for text nodes so you can't expect browsers to implement it. Text nodes inherit their style from their parent element, so if you want to set the font size of some text, wrap it in an element:
window.onload = function() {
var span = document.createElement('span');
// Set DOM property
span.style.fontSize = '200%';
span.appendChild(document.createTextNode('hey'));
// Add to document
document.body.appendChild(span);
};
But in general you are better off to define the style in a class and attach that to the span.

maybe you could use inline css. Never tried this with a textnode though
setAttribute('style', 'font-size:-1;');

Javascript: How to change a nodes name?

For example I have this HTML:
<body>
<div>Text</div>
</body>
And I would like to change the div to something else like p.
This is what I have tried but doesn't works:
var div = document.getElementsByTagName("div")[0]; // Get Element
div.nodeName = "p"; // Change It's Node Name to P
Please no libraries, and I don't really want to replace the actual div with a new p :)

You cannot just change an element. You have to create a new one. E.g.:
var div = document.getElementsByTagName("div")[0];
var p = document.createElement('p');
p.innerHTML = div.innerHTML;
div.parentNode.replaceChild(p, div);
But this could lead to invalid markup, if the original element contains nodes that cannot be descendants of the new node.
Reference: document.createElement, Node.replaceChild
Note: A better version (because it doesn't depend on serializing DOM to text and back and preserves attributes), can be found at https://stackoverflow.com/a/8584158/218196 .

The reason you can't just change the tagName property is because different HTML tags are actually different classes of objects. A div tag is an HTMLDivElement instance, a p tag is an HTMLParagraphElement instance, and so on. These classes can have vastly different properties and interfaces, so turning one into another is not as trivial as you'd think.

You can't.
As the MDC docs say:
nodeName is a read-only attribute.
You'll have to create a new element and give it the right content and attributes.

You cannot. The propery you're after is tagName, but it is read only. You would instead have to create a new node of the desired type, then transfer the innerHTML (and any other properties like className or style) to the new node. Then, insert the new node into the old node's parent, then remove the old node (or use replaceChild).
In other words, the long road is the only road.

I solved this in an XML scenario (eg. where there is no innerHTML) like so:
function renameNode (node, newNodeName) {
const newNode = node.ownerDocument.createElement(newNodeName);
Array.from(node.attributes).forEach(attr => newNode.setAttribute(attr.localName, attr.value));
Array.from(node.childNodes).forEach(childNode => newNode.appendChild(childNode));
node.parentElement.insertBefore(newNode, node);
node.parentElement.removeChild(node);
}
Does not return anything, but will update your DOM.

Changing more than one style attribute with Javascript

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