利用Javascript函数来给一个DIV上添加按钮等控件？

fdddddddddg 2012-11-15 04:16:48

JS文件中的函数
function create2div() {
//创建DIV var div2 = document.createElement("div");
div2.setAttribute("id", "div2id");
div2.style.position = "absolute";
div2.style.background = "#00FF7F";
div2.style.top = "50";
div2.style.left = "50";
div2.style.width = screen.width / 2 + "px";
div2.style.height = screen.height / 2 + "px";
div2.style.zIndex = "10001";
document.body.appendChild(div2);

//在上面的DIV上创建一个按钮
var button = document.createElement("input"); //创建一个input对象（提示框按钮）
button.setAttribute("type", "button");
button.setAttribute("value", "关闭");
button.style.width = "60px";
button.style.align = "center";
button.style.marginLeft = "250px";
button.style.marginBottom = "10px";
button.style.background = "#000000";
button.style.border = "1px solid " + "#000000";//52
button.style.color = "white";

document.getElementById("div2id").apppendChild(button);
}
但是总是提示行:
56
错误: 对象不支持此属性或方法，不知道是不是DIV这个对象不能引用这个方法吗？appendChild

...全文

949 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

fdddddddddg 2012-11-16

打赏
举报

另外两种按钮调用的是同一个JS文件中的同一个函数

fdddddddddg 2012-11-16

打赏
举报

好的，我都贴出来吧， .cs文件： using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class js_try : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void btn1_Click(object sender, EventArgs e) { ClientScript.RegisterStartupScript(typeof(Int16), "creatediv", "creatediv()", true); } } .aspx文件： <%@ Page Language="C#" AutoEventWireup="true" CodeFile="js_try.aspx.cs" Inherits="js_try" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>测试</title> <%-- 引入JS文件--%> <script src="js/JScript.js" type="text/javascript" ></script> </head> <body> <form id="form1" runat="server"> <div> <asp:Button ID="btn1" runat="server" Text="出现锁定半透明DIV" onclick="btn1_Click" />第一种按钮 <br/> <input id="inpid" type="button" value="不消失的DIV" onclick="creatediv()" runat="server" /> 第二种按钮 </div> </form> </body> </html> .js文件 function creatediv( ) { var bgObj = document.createElement("div"); //创建一个div对象（背景层） //定义div属性， bgObj.setAttribute('id', 'bgDiv'); bgObj.style.position = "absolute"; bgObj.style.top = "0"; bgObj.style.background = "#F4A460"; bgObj.style.filter = "Alpha(style=3,opacity=25,finishOpacity=50)"; //progid:DXImageTransform.Microsoft.没有也可以的 bgObj.style.opacity = "0.6"; bgObj.style.left = "0"; bgObj.style.width =screen.width + "px"; bgObj.style.height = screen.height + "px"; bgObj.style.zIndex = "10000"; document.body.appendChild(bgObj); //在body内添加该div对象 alert("ok"); create2div(); //调用下一个函数创建一个新的DIV } //创建第二层DIV function create2div() { var div2 = document.createElement("div"); div2.setAttribute("id", "div2id"); div2.style.position = "absolute"; div2.style.background = "white"; div2.style.top = "50"; div2.style.left = "50"; div2.style.width = screen.width / 2 + "px"; div2.style.height = screen.height / 2 + "px"; div2.style.zIndex = "10001"; document.body.appendChild(div2); var button = document.createElement("input"); //创建一个input对象（提示框按钮） button.setAttribute("type", "button"); button.setAttribute("value", "关闭"); button.style.position = "absolute"; button.style.width = "60px"; button.style.top = "50px"; button.style.background = "#000000"; button.style.border = "1px solid " + "#000000";//52 button.style.color = "white"; //在第二层DIV中添加文本框和按钮 document.getElementById("div2id").appendChild(button); }

kelvenyiu 2012-11-16

打赏
举报

引用 6 楼 xinworld123 的回复:

另外还有点疑问，我用两种按钮来实现两层DIV， <asp:Button ID="btn1" runat="server" Text="出现锁定半透明DIV" onclick="btn1_Click" /> <br/> <input id="inpid" type="button" value="不消失的DIV" onclick="cr……

可以贴出asp 那个事件的代码吗？最好Page_Load(object sender, EventArgs e)也给看看

fdddddddddg 2012-11-16

打赏
举报

自己顶一下！

fdddddddddg 2012-11-15

打赏
举报

另外还有点疑问，我用两种按钮来实现两层DIV， <asp:Button ID="btn1" runat="server" Text="出现锁定半透明DIV" onclick="btn1_Click" /> <br/> <input id="inpid" type="button" value="不消失的DIV" onclick="creatediv()" runat="server" /> 第一种是ASP控件来调用JS中的函数，第二种是客户端控件来调用JS文件中的函数，点两个按钮都能出现想要的两层DIV效果，也就是像百度登录那样的，一层灰透明，另一层是登录窗口，窗口里有按钮和textbox那样的；但是出现效果后刷新一下就会有不同的结果了，第一种按钮生成的效果在刷新页面后还会出现“点击”按钮那样的事，也就是效果重现，第二种按钮生成的效果后，刷新页面就会效果消失不重现；这是什么情况呢？

fdddddddddg 2012-11-15