0

My page has two textareas and a div. One textarea is for the user to enter html and the other is for entering css. When a button is clicked I will call a javascript function to display the css and html inside the div.

function handleLaunch() {
  var div = document.getElementById('pane');
  var html = document.getElementById('h');

  var css = document.getElementById('c');

  div.innerHTML = html.value;
  // This line obviously doesn't work div.style = css.value;
}
<body>
  <textarea id="c" placeholder="CSS code here..." rows="10" cols="50"></textarea>
  <div id="pane">

  </div>
  <br>
  <textarea id="h" placeholder="Html code here..." rows="10" cols="50"></textarea>
  <br>
  <button type="button" onclick="handleLaunch()">Launch</button>

Now, how to set the css to the text ?

EDIT: I should have mentioned that I want to be able to put something like .classExample{text-align:center} in the css textarea and have it apply.

Improve this question
6
  • 3
    Anyway div.style.cssText = css.value would let you type CSS in the input Commented Sep 30, 2016 at 20:52
  • Unfortunately that didn't work Commented Sep 30, 2016 at 20:55
  • You sure div.style.cssText = "background-color: red"; does not work? Commented Sep 30, 2016 at 20:57
  • Would it not make more sense to setup up a 3 column input with the ability to add multiple rows. So you would have ID, Class & CSS, Then you could add or remove rows as necessary so then you could target specific ID's or class names. Commented Sep 30, 2016 at 21:06
  • I'm not exactly sure what you mean. Could you give me a coded example? Commented Sep 30, 2016 at 21:09

2 Answers 2

Reset to default
2

Yes, @adeneo answer works, this snippet shows it. Enter color: red; for example as CSS, and any text as HTML...

function handleLaunch() {
  var div = document.getElementById('pane');
  var html = document.getElementById('h');

  var css = document.getElementById('c');

  div.innerHTML = html.value;
  div.style.cssText = css.value;
}
<body>
  <textarea id="c" placeholder="CSS code here..." rows="10" cols="50"></textarea>
  <div id="pane">

  </div>
  <br>
  <textarea id="h" placeholder="Html code here..." rows="10" cols="50"></textarea>
  <br>
  <button type="button" onclick="handleLaunch()">Launch</button>

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

1 Comment

This only sets the style for the entire div. I should have clarified that I want to be able to use classes and id's in the css textarea. Does this make sense?
0

Assuming that you are defining css properties along with selectors, for example you css text is like 

div{
    background:red;
}
.someClass{
    font-size:12px;
}

and your html looks like 

<div>DIV content</div>
<span class="someClass"> Content in someClass</span>

You can add the html as div.innerHTML = html.value;

But for adding the css to your page you will have to do the following

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = document.getElementById('c').value;
document.getElementsByTagName('head')[0].appendChild(style)
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.