最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin0浏览0评论

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.

Share Improve this question asked Feb 11, 2015 at 15:33 Jack ParkerJack Parker 5692 gold badges10 silver badges36 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

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?

发布评论

评论列表(0)

  1. 暂无评论