Javascript Div元素问题
Javascript Div Element Issue
好的,所以我有一堆HTMLdiv类和一个包含所有类的ID。我需要在Javascript中使用相同的概念,以产生相同的结果。如有任何帮助,我们将不胜感激:)。我的主要问题是,我无法获得我编写的JavaScript代码来以与我编写的HTML相同的方式显示CSS。
HTML:
<body>
<div id = "barOne">
<div class = standard>
<p> Magazine </p>
</div>
<div class = standard>
<p> Newspaper </p>
</div>
<div class = standard>
<p> English </p>
</div>
<div class = standard>
<p> Friends </p>
</div>
<div class = standard>
<p> Photos </p>
</div>
<div class = standard>
<p> Videos </p>
</div>
<div class = standard>
<p> Admin </p>
</div>
</div> <!-- End barOne-->
</body>
以下是我将代码转换为JavaScript的尝试,有什么想法吗?
function mainMenuBar() {
console.log("Mainmenubar invoked...");
var menuBarWrapper = document.createElement("div");
var btns = [];
var btnTxt = [];
for (var i = 0; i < 6; i++) {
btns.push(document.createElement("div"));//Adds a button
btnTxt.push(document.createElement("p"));//Adds a p tag
btns[i].className = "standard";
btns[i].id = "btn" + i;
//btns[i].setActive("onclick","clickFunction()");
//btnTxt[i].className = "";
btns[i].appendChild(btnTxt);//Adds the lbl to button
menuBarWrapper.appendChild(btnTxt[i]);
}
document.getElementById("document.body").appendChild(menuBarWrapper);
}
function clickFunction() {
console.log("clickFunc invoked");
}
下面是我想要对应的CSS,它是当前用上面显示的HTML代码呈现的JavaScript代码。。。
body{
background-color: f5f5f5;
}
.canvasGeneral {
height: 768px;
width: 1024px;
position:fixed;
left:50%;
background-color: f5f5f5;
height:768px;
/*overflow:hidden;*/
}
#barOne {
border-top: 1px solid #939393;
left: 0px;
width: 1024px;
bottom: 1px;
height 39px;
position:absolute;
padding-left: 35px;
/*Quick nav bar at the bottom, primary nav*/
}
.standard {
margin: 9px;
background-color:f5f5f5;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
display:inline-block;
color: #939393;
font-family:helvetica;
font-size:13px;
font-weight:light;
padding:0px 33px;
text-decoration:none;
-webkit-transition: 0 .2s;
-moz-transition: 0s .2s;
-ms-transition: 0 .2s;
-o-transition: 0 .2s;
transition: 0 .2s;
}
.standard:active {
position:relative;
color: #007bff;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
你能公布失败的地方吗?您是否缺少每个div的类名?它插入了div吗?
你在做一些没有意义的事情。每个div都会创建一个块,因为所有嵌套的div都有相同的类,而外部类围绕着所有这些类,为什么不将这两个类合并,并有一个div块或每个单独的div块呢。你为什么这样做有原因吗?
好的,这是代码:
console.log("Mainmenubar invoked...");
var menuBarWrapper = document.createElement("div");
menuBarWrapper.id = 'barOne';
var btns = [];
var btnTxt = [];
for (var i = 0; i < 6; i++) {
btns.push(document.createElement("div"));//Adds a button
btnTxt.push(document.createElement("p"));//Adds a p tag
btnTxt[i].innerHTML = 'button ' + i; // Added this line just to show the element
btns[i].id = "btn" + i;
btns[i].addEventListener("click", clickFunction);
btns[i].appendChild(btnTxt[i]);//Adds the lbl to button
menuBarWrapper.appendChild(btns[i]);
}
document.body.appendChild(menuBarWrapper);
console.log(document.body.innerHTML);
function clickFunction() {
console.log("clickFunc invoked");
}
然后用#oneBar div
替换.standard
选择器,用#oneBar div:active
替换.standard:active
选择器。
jsFiddle上的演示。
您可以这样做。。。实时演示
对代码进行了一些更改。。。
已编辑
function mainMenuBar() {
console.log("Mainmenubar invoked...");
var menuBarWrapper = document.createElement("div"),
text = ["Magazine", "Newspaper", "English", "Friends", "Photos", "Videos", "Admin"],
ele = null,
i = 0;
menuBarWrapper.id = "barOne";
for (i = 0; i < 7; i++) {
ele = document.createElement("div");
ele.className = "standard";
ele.id = "btn" + i;
ele.innerHTML = "<p>" + text[i] + "</p>";
menuBarWrapper.appendChild(ele);
}
// instead of adding event listener per element would be better if you use event delegation
menuBarWrapper.addEventListener("click", clickFunction, false);
document.getElementsByTagName("body")[0].appendChild(menuBarWrapper);
}
function clickFunction(e) {
if (e.target.nodeName.toLowerCase() === 'p') {
console.log("clickFunc invoked");
e.stopPropagation();
e.preventDefault();
}
}
mainMenuBar();
相关文章:
- Small Javascript从动态表单中删除多个元素的问题
- 使用javascript删除元素时出现的问题
- 获取要引发的fadeIn元素时出现问题
- 使用AngularJS UI路由器时出现元素绑定问题
- 访问带有变量的Object元素时出现问题
- 数据互绑定问题:转换器只运行一次,无法绑定元素的 ID
- 在方形空间 (YUI) 上重绘元素时出现问题
- 替换
元素中的特殊字符的问题
- 在自定义元素中扩展 HTMLCanvasElement 问题
- 在具有CONTENT标记的自定义元素中使用SELECT标记时出现问题
- 性能问题:存储对DOM元素的引用与使用选择器相比
- OnMouseMove on body标记导致子下拉元素出现问题
- Javascript连接元素,出现问题
- 包含方法和突出显示元素的问题
- 单击元素时出现问题,这些元素是用.html()添加到页面的
- 将元素推送到嵌套数组的问题
- firefox中的浮动元素问题
- 这种计算画布元素中非白色像素的方法有什么问题
- Scriptaculous排序表和句柄的问题(元素排序不正确)
- 问题元素相同的类