在页面加载时使用Javascript更改CSS事件

我有一个应用程序用户可以输入文档说明的输入文本字段。在页面加载事件上，我检查这个输入字段是否为空。如果是空的，我插入下列文字和样式更改为斜体和红色在页面加载时使用Javascript更改CSS事件

Please enter a description for this document

我有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）。

风格未被添加！这就好像这个代码被执行，但被忽略...

我在做什么错？

来源

2013-01-03 ivan_drago

你知道你声明'frame'两次吗？ JavaScript没有块范围，只有函数范围。这可能会导致问题。 [JSLint]（http://www.jslint.com/）应该能够捕捉到这些错误。 – elclanrs

'e_docElement.style.fontStyle =“italic”; e_docElement.style.color =“red”;' – Shmiddty

@Shmiddty - 你是个天才！谢谢！：）发布答案，如果你愿意，我会接受它。 –

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

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

你将永远需要使用style属性修改元素的内联CSS。

来源

2013-01-03 18:46:55 Shmiddty

在页面加载时使用Javascript更改CSS事件

回答

相关问题