在页面加载事件中使用 Javascript 更改 CSS答案

【问题标题】：Change CSS using Javascript on page load Event在页面加载事件中使用 Javascript 更改 CSS
【发布时间】：2012-12-18 04:22:00
【问题描述】：

我有一个输入文本字段，应用程序用户可以在其中输入文档描述。在页面加载事件中，我检查此输入字段是否为空。如果为空，我插入以下文字，并将样式改为斜体和红色-

请输入此文档的描述

当页面处于活动状态时，我有 onblur 和 onfocus 事件的事件侦听器。

基本上，如果用户点击文本字段，我会将 CSS 改回正常和黑色，并将值恢复为空字符串。

Onblur 我会检查内容 - 如果它是空的，我会回复“请输入...”消息和红色/斜体 CSS。如果它不为空，我将保持用户输入不变。

我遇到的问题是，在初始页面加载后，如果用户转到另一个页面进行查找然后返回并且他们没有更改文档描述，所以它仍然说“请输入...”，红色和斜体的 CSS 不生效。

我在所有浏览器的 Firefox 中都遇到了这种情况。

这是我如何在浏览器中注册页面 onload 事件 -

//Microsoft Internet Explorer Browser - iFrame event register
if (navigator.appName.indexOf("Microsoft") != -1) {
  var frame = getPortlet();

  frame.contentWindow.location.replace('${channelUrl}');
  var prevPortletLoadEvent = frame.onload ? frame.onload : function () {};
  var refresh = function() {
    prevPortletLoadEvent();
    resizePortletContainer();
    attachTinyButtonListener();
    attachDocumentDescriptionListener();
    enforceDocumentDescriptionStyleIfNecessary();
  };

  if(frame.attachEvent) { frame.attachEvent('onload', refresh); } //IE browsers before version 9
  else  { frame.addEventListener('load', refresh, false); }
}

//All other major browsers - iFrame event register
else {
  var frame = getPortlet();
  var prevPortletLoadEvent = frame.onload ? frame.onload : function () {};
  frame.onload = function () {
    prevPortletLoadEvent();
    resizePortletContainer();
    attachTinyButtonListener();
    attachDocumentDescriptionListener();
    enforceDocumentDescriptionStyleIfNecessary();
  };

  var prevPortletResizeEvent = frame.onresize ? frame.onresize : function () {};
  var onresize = function () {
    prevPortletResizeEvent();
    resizePortletContainer();
    attachTinyButtonListener();
    attachDocumentDescriptionListener();
    enforceDocumentDescriptionStyleIfNecessary();
  };
}

这里是enforeDocumentDescriptionStyleIfNecessary -

function enforceDocumentDescriptionStyleIfNecessary() {

  var  efrm  = getPortlet();
  var  e_doc = efrm.contentDocument ? efrm.contentDocument: efrm.contentWindow.document;
  var  e_docElement = e_doc.getElementById('document.documentHeader.documentDescription');
  if (e_docElement.value == 'Please enter a description for this document') {


    e_docElement.style = 'italic';
alert("1");    
    e_docElement.color = 'red';
alert("2");
  }
}

代码在页面加载时执行。警告框显示 1 和 2，我可以在每个警告框后直观地检查 html 中的该元素）。

样式未添加！就好像这段代码被执行但被忽略了......

我做错了什么？

【问题讨论】：

你知道你要声明frame 两次吗？ JavaScript 没有块作用域，只有函数作用域。这可能会导致问题。 JSLint 应该能够捕捉到这些错误。
e_docElement.style.fontStyle = "italic"; e_docElement.style.color = "red";
@Shmiddty - 你是个天才！谢谢！ :) 发布答案，如果你愿意，我会为你接受。

标签： javascript css dom-events pageload

【解决方案1】：

您没有正确设置元素的样式。应该是：

e_docElement.style.fontStyle = 'italic';
e_docElement.style.color = 'red';

您将始终需要使用 style 属性来修改元素的内联 css。

【讨论】：