使用頁面加載事件上的Javascript更改CSS

Question

我有一個輸入文本字段，應用程序用戶可以在其中輸入文檔描述。 在頁面加載事件中，我檢查此輸入字段是否為空。 如果為空，則插入以下文本，並將樣式更改為斜體和紅色-

Please enter a description for this document

當頁面處於活動狀態時，我具有onblur和onfocus事件的事件偵聽器。

基本上，如果用戶單擊文本字段，則將CSS改回正常和黑色，然后將值恢復為空字符串。

Onblur我將檢查內容-如果為空，我將回復到“請輸入...”消息和紅色/斜體CSS。 如果不為空，我將保持用戶輸入不變。

我遇到的問題是，在初始頁面加載后，如果用戶轉到另一個頁面進行查找然后又返回，但他們沒有更改文檔描述，那么它仍然在說“請輸入... ”，紅色斜體CSS不會生效。

我在所有瀏覽器的Firefox中都遇到這種情況。

這是我在瀏覽器中注冊頁面加載事件的方式-

//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）。

樣式未添加！ 好像該代碼已執行但被忽略了...

我究竟做錯了什么？

Answer 1

您沒有正確設置元素的樣式。 它應該是：

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

您將始終需要使用style屬性來修改元素的內聯CSS。