html - Using a CSS Stylesheet with Javascript .innerHTML - Stack Overflow

admin管理员组

文章数量:1225099

If I have a javascript function that loads an error using

document.getElementById("ID").innerHTML = "This is your error";

And I want to stylize it say change the text to a different color, and put the error into a different position, how would I go about doing that? I've been looking around, and cannot find any information.

If I have a javascript function that loads an error using

document.getElementById("ID").innerHTML = "This is your error";

And I want to stylize it say change the text to a different color, and put the error into a different position, how would I go about doing that? I've been looking around, and cannot find any information.

• javascript
• html
• css
• jsp

Share Improve this question Follow asked Feb 11, 2015 at 15:33 Jack ParkerJack Parker 56922 gold badges1010 silver badges3636 bronze badges 5

• 2 document.getElementById("ID").style.color="red" – Alexis Peters Commented Feb 11, 2015 at 15:35
• Thanks, but I was told specifically to use CSS is there a way to do that? – Jack Parker Commented Feb 11, 2015 at 15:37
• possible duplicate of Change an element's CSS class with JavaScript – Fabio Antunes Commented Feb 11, 2015 at 15:37
• I never posted this before. – Jack Parker Commented Feb 11, 2015 at 15:38
• And having just looked it's not. – Jack Parker Commented Feb 11, 2015 at 15:39

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 10

As innerHTML suggests you can also add HTML. You could for instance add a span tag with a class that you style via CSS.

JS/CSS and HTML

document.getElementById('error-message').innerHTML = "<span class='error'>my error</span>";

.error {
  color: red;
  font-size: 24px;
}

<div id="error-message"></div>

Check this out , this answer should suffice to your needs:

document.getElementById("ID").innerHTML = "This is your error";
var sheet = document.createElement('style')
sheet.innerHTML = "div {color:red;overflow:hidden;}";
document.body.appendChild(sheet);

Add the below line to your span

#myspan{float:left;}

Working fiddle:http://jsfiddle.net/0z971bsn/

As you mentioned in the comments , to check for errors you can refer to the answer to this question How to get my forms' Javascript error function to cancel form submission and insert error message?

本文标签： htmlUsing a CSS Stylesheet with Javascript innerHTMLStack Overflow