View unanswered posts | View active topics It is currently 2018-09-19 22:22



Reply to topic  [ 10 posts ] 
 document.createElement('div')的两个问题 
Author Message
初级会员

Joined: 2017-11-29 11:31
Posts: 52
Post document.createElement('div')的两个问题
代码如下。
有两个问题:1、DIV中我加了一个输入框,可是无法点击输入。2、设置位置的(htmlNode.style.top = '200px' htmlNode.style.left = '500px';)不起作用。
var htmlNode = document.createElement('div');
htmlNode.innerHTML = '<input type="text" id="searchinfo" size="12" onkeypress="if(event.keyCode==13) {searchnode()}"/><input type="button" value="搜索" onclick="searchnode()"/><br><div id="result">111111</div>';
// htmlNode.style.color = '#f00';
// htmlNode.style.textAlign = 'center';
// htmlNode.style.display = 'none';
htmlNode.style.width = '300px';
htmlNode.style.height = '300px';
// htmlNode.style.backgroundImage = 'url("./img/1.jpg")';
htmlNode.style.top = '200px';
htmlNode.style.left = '500px';
htmlNode.style.display = "block";
document.body.appendChild(htmlNode);


2018-04-12 12:56
Profile
TWaver开发组
User avatar

Joined: 2017-02-22 10:01
Posts: 396
Post Re: document.createElement('div')的两个问题
htmlNode.style.position = 'absolute'.


2018-04-14 22:26
Profile
初级会员

Joined: 2017-11-29 11:31
Posts: 52
Post Re: document.createElement('div')的两个问题
加上这一句可以输入、位置也可以了。但是onkeypress="if(event.keyCode==13) {searchnode()和<input type="button" value="搜索" onclick="searchnode()">没有反应。


2018-04-15 21:58
Profile
初级会员

Joined: 2017-11-29 11:31
Posts: 52
Post Re: document.createElement('div')的两个问题
另外,像这些元素的style.**代表什么意思的,哪里有得查?


2018-04-15 23:02
Profile
TWaver开发组
User avatar

Joined: 2018-04-16 16:23
Posts: 8
Post Re: document.createElement('div')的两个问题
您好:
您的问题解答----
1、这些是关于通过js修改元素样式的方式
其本质是根据CSS权值优先值来应用CSS样式
也就是js修改样式并应用于内联样式
(即在查看H5标签时,可以查看到您修改的属性)
权值相关:
https://blog.csdn.net/mrcxt/article/details/52024994
https://www.cnblogs.com/mo-cha/p/5560213.html
2本质是定义的事件是在全局下执行的
2-1、在全局下书写----测试正常,两种方式都正常
2-2、如果在函数内部定义方法,可以使用全局变量定义
window.searchnode = function (){
console.log(1);
}
2-3、也可以不在标签上定义,而是直接通过js找到对应标签(即DOM元素)
再绑定事件
具体实现:
//定义方法
function searchnode(){console.log(1);}
//找DOM元素
var btn = document.querySelector('[type = button]');
//绑定事件
btn.onclick = searchnode;
//回车事件
onkeypress = function(){
var code = event.keyCode || event.charCode;(考虑兼容性)
if(code == 13){
searchnode();
}
}


2018-04-16 16:27
Profile
初级会员

Joined: 2017-11-29 11:31
Posts: 52
Post Re: document.createElement('div')的两个问题
Robbins.zhang wrote:
您好:
您的问题解答----
1、这些是关于通过js修改元素样式的方式
其本质是根据CSS权值优先值来应用CSS样式
也就是js修改样式并应用于内联样式
(即在查看H5标签时,可以查看到您修改的属性)
权值相关:
https://blog.csdn.net/mrcxt/article/details/52024994
https://www.cnblogs.com/mo-cha/p/5560213.html
2本质是定义的事件是在全局下执行的
2-1、在全局下书写----测试正常,两种方式都正常
2-2、如果在函数内部定义方法,可以使用全局变量定义
window.searchnode = function (){
console.log(1);
}
2-3、也可以不在标签上定义,而是直接通过js找到对应标签(即DOM元素)
再绑定事件
具体实现:
//定义方法
function searchnode(){console.log(1);}
//找DOM元素
var btn = document.querySelector('[type = button]');
//绑定事件
btn.onclick = searchnode;
//回车事件
onkeypress = function(){
var code = event.keyCode || event.charCode;(考虑兼容性)
if(code == 13){
searchnode();
}
}



您好。1、我的问题是诸如“htmlNode.style.position = 'absolute'.”这类的style参数哪里能找得到资料?这个应该是twaver产品的特性吧。
2、我的问题是<input>中的函数无法得到调用,而不是函数的作用域的问题。如果是作用域的问题,会出现找不到函数的错误。我把其中的searchnode()更为alert(),也是没有反应的。


2018-04-16 16:54
Profile
TWaver开发组
User avatar

Joined: 2018-04-16 16:23
Posts: 8
Post Re: document.createElement('div')的两个问题
您好:
1、创建的htmlNode是H5标签,建议可以了解相关文章
https://www.cnblogs.com/LiuWeiLong/p/6058059.html
2、我这边复制的是您贴图的代码,直接运行没问题的。如果方便,
可以把demo贴出来,或发给我,谢谢!


2018-04-16 20:16
Profile
初级会员

Joined: 2017-11-29 11:31
Posts: 52
Post Re: document.createElement('div')的两个问题
以下是demo,麻烦看看了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<script type="text/javascript" src="..\js\twaver.js"></script>
<script type="text/javascript"></script>
<script>
var box = new twaver.ElementBox();
var network = new twaver.vector.Network(box);
var view=network.getView();
function init() {
initNetwork();
initDataBox()
};
function initNetwork(){
document.body.appendChild(view);
network.adjustBounds({x:0,y:0,width:800,height:600});
};
function initDataBox(){
var node1 = new twaver.Node();
node1.setName('node1');
node1.setLocation(100,100);
box.add(node1);

var htmlNode = document.createElement('div');
htmlNode.innerHTML = '<input type="text" id="searchinfo" size="12" onkeypress="if(event.keyCode==13) {alert("111");}"/><input type="button" value="搜索" onclick="alert("??");"/><br><div id="result">111111</div>';
htmlNode.style.width = '1300px';
htmlNode.style.height = '300px';
htmlNode.style.top = '200px';
htmlNode.style.left = '300px';
// htmlNode.style.display = "block";//(这个参数是什么意思?)
htmlNode.style.position = 'absolute';
document.body.appendChild(htmlNode);

};
</script>
<body onload="init()"></body>
</html>


2018-04-17 8:37
Profile
TWaver开发组
User avatar

Joined: 2018-04-16 16:23
Posts: 8
Post Re: document.createElement('div')的两个问题
您好:
1、htmlNode.style.display = "block";//(这个参数是什么意思?)
这行参数是设置htmlNode 的样式为“块级元素”
https://www.cnblogs.com/zhaowy/p/8400215.html
2、书写上的错误,会报无法解析的错误。即无法向下解析
onclick="alert("??")"
了解:<"">尖括号内部的“”是成对出现的,
这样解读你写的代码即会报语法解析错误
如需直接按照你写的执行,可以使用转义字符"\"(就是我们所说的斜杠)
onclick="alert(\'??\')"
上面的onkeypress也是一样的修改,即可运行


2018-04-17 14:42
Profile
初级会员

Joined: 2017-11-29 11:31
Posts: 52
Post Re: document.createElement('div')的两个问题
嗯,可以了。我的浏览器一直没有错误提示,所以意识到这个问题。
谢谢谢谢!


2018-04-17 15:00
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 10 posts ] 

Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron