Javascript with CSS

Question

How do I use document.write with my stylesheet? For example, I want to use div, table and caption in a sepearte stylesheet and reference it in the document.write function in my HTML file.

Please consider the following stylesheet:

.div {
width:auto;
margin;10px;

}

.table {
background-color:purple;
border:1px solid
border-spacing:1px
border-collapse:separate;
padding:35px;

}

.caption {
background-color:purple;


}

Then I want to use these classes in the document.write() function in my HTML document:

<head> <link rel="stylehseet" href="style/myStyle.css"></head>
<body>
<script Language="JavaScript">
document.write('<div style="width:auto; margin:10px;">\
            <table style="border="1" cellspacing="1" cellpadding="35">\
            <caption style="background-color:purple;"> Table </caption>')
</script>
</body>

Instead of having the style defintions in the HTML file, how can I put the defintions in the CSS file and reference it in the HTML?

How do I combine forces, so to speak?

Something like this: document.write('<div class="div">');? It will write a div that has that class. So your CSS will apply to it. — Robin
– Robin, Commented Feb 22, 2014 at 5:58

Emilio Gort · Accepted Answer · 2014-02-22 06:30:50Z

1

.div {
  width:auto; 
  margin:10px;
}
.table,td  {
    border-collapse:collapse;
    border: 1px solid #000;/*# is the black color*/
    border-spacing: 10px;/*cellspacing*/
    border-collapse: separate;/*cellspacing*/
    padding: 35px;cellpadding
}
.caption {
  background-color:purple; /*caption doesn't support background property*/
}

in the head put your link to the css file

<link rel="stylesheet" type="text/css" href="style/mystyle.css">

the javascript part

<script Language="JavaScript">
 document.write('<div class="div">\
        <table class="table"><tr><td></td></tr></table>\
        <caption class="caption"> Table </caption></div>')
</script>

http://jsfiddle.net/emigort/pJbKu/

edited Feb 22, 2014 at 6:30

answered Feb 22, 2014 at 5:57

Emilio Gort

3,4553 gold badges32 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user2948897 Over a year ago

How do I use that in the document.write() function?

user2948897 Over a year ago

Thanks, but my table and its cellpadding, border, or spacing is all wrong

user2948897 Over a year ago

I reddited my CSS file, perhaps, you could tell me what is wrong about it?

user2948897 Over a year ago

The scale is correct. However, I do not see any grid lines

Emilio Gort Over a year ago

add the td and the border-collapse:collapse;

|

jeremyjjbrown · Accepted Answer · 2014-02-22 05:59:36Z

div 
 {
    width:auto; 
    margin:10px;
 }

just move your styles into the sheet. The . BTW will target a class, you are targeting tags in your javascript. Then link the css file into your page

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

if you must do it in javascript

var css = 'div { width:auto; margin:10px; }',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

head.appendChild(style);

Collectives™ on Stack Overflow

Javascript with CSS

2 Answers 2

8 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Linked

Related