CODEWITHSUNDEEP
javascripthtmlcssjsp
Jack Parker
Jack Parker

Reputation: 569

Using a CSS Stylesheet with Javascript .innerHTML

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.

Upvotes: 4

Views: 49209

Answers (2)

m0bi5
m0bi5

Reputation: 9475

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?

Upvotes: 1

Dieterg
Dieterg

Reputation: 16368

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>

Upvotes: 10

Related Questions