Customizing the appearance of an HTML element using user-input text styling

Question

Customizing the appearance of an HTML element using user-input text styling

On my webpage, there are two text areas and a division. One of the text areas is meant for users to input HTML code, while the other is for CSS code. Whenever a button is clicked, a JavaScript function will be triggered to display the combined HTML and CSS within the division.

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

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

  div.innerHTML = html.value;
  // In this part, the css value needs to be set differently: div.style = css.value;
}

<body>
  <textarea id="c" placeholder="Insert CSS code here..." rows="10" cols="50"></textarea>
  <div id="pane">

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

To determine how to implement the CSS as text, one must consider...

UPDATE: It should be noted that I would like to include something like ".classExample{text-align:center}" in the CSS text area and apply it on the content.

javascript html css

Answer 1

Answer №1

Indeed, the solution provided by @adeneo is effective. You can test it out with this code snippet. Simply input color: red; as CSS and any desired text as HTML...

function updatePage() {
  var container = document.getElementById('pane');
  var contentHtml = document.getElementById('htmlContent');

  var cssStyle = document.getElementById('cssStyle');

  container.innerHTML = htmlContent.value;
  container.style.cssText = cssStyle.value;
}

<body>
  <textarea id="cssStyle" placeholder="Insert CSS style here..." rows="10" cols="50"></textarea>
  <div id="pane">

  </div>
  <br>
  <textarea id="htmlConent" placeholder="Add HTML content here..." rows="10" cols="50"></textarea>
  <br>
  <button type="button" onclick="updatePage()">Update Page</button>

Answer 2

Indeed, the solution provided by @adeneo is effective. You can test it out with this code snippet. Simply input color: red; as CSS and any desired text as HTML...

function updatePage() {
  var container = document.getElementById('pane');
  var contentHtml = document.getElementById('htmlContent');

  var cssStyle = document.getElementById('cssStyle');

  container.innerHTML = htmlContent.value;
  container.style.cssText = cssStyle.value;
}

<body>
  <textarea id="cssStyle" placeholder="Insert CSS style here..." rows="10" cols="50"></textarea>
  <div id="pane">

  </div>
  <br>
  <textarea id="htmlConent" placeholder="Add HTML content here..." rows="10" cols="50"></textarea>
  <br>
  <button type="button" onclick="updatePage()">Update Page</button>

Answer 3

Answer №2

If you are setting css properties along with selectors, for instance your css text is as follows:

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

and your html appears like this:

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

To insert the html, use div.innerHTML = html.value;

However, to apply the css to your page, you must follow these steps:

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

Answer 4

If you are setting css properties along with selectors, for instance your css text is as follows:

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

and your html appears like this:

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

To insert the html, use div.innerHTML = html.value;

However, to apply the css to your page, you must follow these steps:

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

Customizing the appearance of an HTML element using user-input text styling

Answer №1

Answer №2

Similar questions

Exploring the process of sending JSON responses through Express

In Chrome browser, the orientation of the options in the datalist remains consistent

I am unable to invoke this function: TypeError: this.fetchData is not a function

jquery form submission issue unresolved

What are the reasons for avoiding placing CSS code directly within HTML?

Is there a way for me to obtain a selection of 20 random items from this JSON data

Upon hovering, icons for each project name are displayed when `mouseenter` event is triggered

Attempting to enhance the modularity and readability of my code

The nuSelectable plugin enhances the functionality of jQuery

Using this.setState in ReactJS removes filters

How can I emphasize the React Material UI TextField "Cell" within a React Material UI Table?

"An error occurs when trying to trigger a .click() event within a list element

"Trouble with props: List items not showing up after refreshing the page

Tips for implementing a CSS Flexbox layout with varying div heights

What is the best way to seamlessly integrate an image icon into a sentence, so it appears as a natural part of the text

Dynamically update a form with steps using JQuery-steps and send all objects to the controller

"Customizing the Material-ui TextField DOM Element: A Step-by-Step

Encountered issues loading JavaScript and received a pyppeteer error while trying to access a website through requests

Items are overflowing the flex container, exceeding its boundaries

Challenges with TypeScript build in DevOps related to Material UI Box Component