我有一个用js和css设计的按钮,每当我点击按钮(做回发)时,它内部都有一个更新面板,它会失去风格吗?
非常确定这是一个简单的问题,任何想法?
<html xmlns="http://www.w3.org/1999/xhtml">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" class="art-button" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
function artButtonsSetupJsHover(className) {
var tags = ["input", "a", "button"];
for (var j = 0; j < tags.length; j++){
var buttons = xGetElementsByClassName(className, document, tags[j]);
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
if (!button.tagName || !button.parentNode) return;
if (!artHasClass(button.parentNode, 'art-button-wrapper')) {
if (!artHasClass(button, 'art-button')) button.className += ' art-button';
var wrapper = document.createElement('span');
wrapper.className = "art-button-wrapper";
if (artHasClass(button, 'active')) wrapper.className += ' active';
var spanL = document.createElement('span');
spanL.className = "l";
spanL.innerHTML = " ";
wrapper.appendChild(spanL);
var spanR = document.createElement('span');
spanR.className = "r";
spanR.innerHTML = " ";
wrapper.appendChild(spanR);
button.parentNode.insertBefore(wrapper, button);
wrapper.appendChild(button);
}
artEventHelper.bind(button, 'mouseover', function(e) {
e = e || window.event;
wrapper = (e.target || e.srcElement).parentNode;
wrapper.className += " hover";
});
artEventHelper.bind(button, 'mouseout', function(e) {
e = e || window.event;
button = e.target || e.srcElement;
wrapper = button.parentNode;
wrapper.className = wrapper.className.replace(/hover/, "");
if (!artHasClass(button, 'active')) wrapper.className = wrapper.className.replace(/active/, "");
});
artEventHelper.bind(button, 'mousedown', function(e) {
e = e || window.event;
button = e.target || e.srcElement;
wrapper = button.parentNode;
if (!artHasClass(button, 'active')) wrapper.className += " active";
});
artEventHelper.bind(button, 'mouseup', function(e) {
e = e || window.event;
button = e.target || e.srcElement;
wrapper = button.parentNode;
if (!artHasClass(button, 'active')) wrapper.className = wrapper.className.replace(/active/, "");
});
}
}
}
artLoadEvent.add(function(){artButtonsSetupJsHover(“art-button”);});
答案 0 :(得分:2)
您可能在onload事件中以js设置样式,但此事件仅触发一次,然后在每次回发中更新面板都不会通过它。您必须附加到PageRequestManager页面加载的事件,如下所示:
在ScriptManager声明之后,您编写此代码,并且每次在内部进行回发时脚本都会运行。
<script type="text/jscript">
<!--
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(pageLoaded);
function pageLoaded(sender, args) {
document.getElementById("Button1").style.fontWeight = "bold";
}
-->
</script>
或直接来自Sys.Application.add_load:
<script type="text/jscript">
<!--
Sys.Application.add_load(
function pageLoaded(sender, args) {
document.getElementById("Button1").style.fontWeight = "bold";
});
-->
</script>
答案 1 :(得分:1)
有些情况我可以想到
。如果你给我们代码,也许我们可以看到问题是什么。
答案 2 :(得分:1)
如果您使用js设置样式,则可能需要在页面上使用ScriptManager注册该js。这样,脚本将加载到部分页面回发上。