How to apply CSS directly to DOM TextNodes?


Tags: javascript,html,html5,css3

Problem :

How can I assign text-align:center property to TextNode created thro' DOM node. I added this TextNode directly to body(without using any <div> components).

 var Text = document.createTextNode("Welcome");
 Text.style.text-align = 'center';


Solution :

You can't. CSS only applies to elements, not text nodes.

You'll need to wrap the text node in an element, or use an element directly:

var text = document.createElement("p");
text.textContent = "Welcome";
text.style.textAlign = "center";

...though you might as well use a heading element for this.


    CSS Howto..

    How to create a gullwing shape with CSS

    How to fix text running off screen and breaking layout without using CSS word-break property?

    How to show hidden div in the same line as the paragraph text?

    How to toggle a separate drop down beneath a grid of items using JQuery?

    How to remove pipe separator of the first list item on the line?

    How to add a custom CSS file in ExtJs 5?

    How to create a circumference with CSS? [closed]

    How to combine jQuery animate with css3 properties without using css transitions?

    How to combine transforms in CSS?

    how to make this fit in same line in css

    How to pop a dialog box /iframe/Lightbox like one below above the webpage content [closed]

    How can I make a button apply a class to the next div in the document flow?

    how to setup capybara-webkit to test ajax calls and get screenshots(html with css and javascript loaded)

    How to create a horizontal scroll bar when shrinking the window

    How can I create a horizontal selector in a form with only html and css?

    How to get selected table cells background colour?

    How to set align of elements to center with css?

    How to match an index of a CSS class with JavaScript?

    How do I use pseudo-classes to select all children except first and last?

    How to load CSS in specific page in php

    CSS help - how to keep my div in place with a responsive design

    How to validate vendor prefixes in CSS like -webkit- and -moz-?

    How to use Bootstrap 3 grid if elements are tiled with different height and widths

    How to hide grey scrollbars on a DIV in Android - they only show when you cannot scroll

    How to prevent input elements from affecting a table's columns' widths?

    How to center align vertically the container in bootstrap

    How to flatten checkbox using CSS? [duplicate]

    How can I best port a frame-based “HTML of yesteryear” application to modern CSS(3)? [closed]

    How are these websites full-screened in the browser with a learn more button at the bottom (moves you into automatically down the page) [closed]

    how to get double border in using CSS?