Javascript Div 元素问题答案

【问题标题】：Javascript Div Element IssueJavascript Div 元素问题
【发布时间】：2013-07-06 06:28:53
【问题描述】：

好的，所以我有一堆 HTML div 类和一个包含所有类的 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");
}

这是我想要与当前使用上面显示的 HTML 代码呈现的 JavaScript 代码相对应的 CSS...

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;
}

【问题讨论】：

Convert HTML Divs to Javascript 的可能重复项
在您的 html 模板中，您没有任何 span 元素，并且您的 div 元素没有 id，所以...您要对脚本执行的操作与您提供的 html 模板不同跨度>
spans 似乎是动态创建的，但我看不到 #canvas 元素存在，它不在示例中......而且将属性值包含在引号。
如果#canvas 存在并且是一个HTMLCanvasElement，canvas 的文档会说：“Permitted content: Transparent but with no interactive content descendants except for <a> elements, <button> elements, <input> elements whose type attribute is checkbox, radio, or button.”。这个setActive()，如果你正在使用某个库，请在问题中提及它，或者至少标记它。
@Teemu ：没有使用特定的库；通用 Javascript。我已经编辑了文档，所以它有
而不是这是一个错误。使用我当前用 JS 编写的代码，我只是在寻找一种使用相同的类名和 ID 名称复制我的 HTML 代码的好方法，如果你能提出这将非常有帮助:)

标签： javascript html web scripting

【解决方案1】：

你能发布失败的内容吗？您是否缺少每个 div 的类名？它是否插入了 div？

不过，您正在做一些没有意义的事情。每个 div 都会创建一个块，因为所有嵌套的 div 都具有相同的类，而外部类围绕着它们，为什么不将这两个类结合起来，并有一个 div 块或每个单独的 div 块。你这样做有什么原因吗？

【讨论】：

我之所以这样做是因为我在工具栏上有 6 个按钮，如果你能给我展示一个更好的代码示例，我很乐意以此为基础修改我的代码
mainMenuBar() 应该对应于 barOne
嗯，首先，您的 MenuItem div 可以被删除，并且该类应用于 <p>。 div 会阻止您的代码，段落已被阻止。这只会使它更容易阅读。如果你改变你的逻辑来匹配它，它可能更容易调试。
每个带有 p 标签的 div 都已就位，因为每个 div 都是工具栏上的一个按钮。你能告诉我一个你要求我对我的 HTML 代码做什么的例子吗？
或者你说的是我的javascript？

【解决方案2】：

你可以做这样的事情...... Live Demo

对您的代码进行了一些更改...

已编辑！

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();

【讨论】：

感谢您的帮助，您能否通过一些编辑告诉我如何让 javascript 代码与我添加到帖子中的一些新 CSS 代码相对应？
@brencode 你的意思是什么变化？您的 CSS 可以在新添加的元素上正常工作......也许您想在 menuBarWrapper div 上添加“barOne”ID？
由于某种原因，在我进行编辑后，CSS 不会使用我拥有的当前 JavaScript 显示
按照我目前的方式放置东西，我想让 JS 使用类标准和 id barOne，但是当前的 JS 似乎没有让 CSS 显示
我想这就是我想要的......我现在非常困惑，你能发布一个不需要用我的 CSS 编辑它的 JavaScript，我有点迷路了，因为我收到了很多推荐的修改，但我不知道该拿哪一个..

【解决方案3】：

好的，代码如下：

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");
}

然后只需将 .standard 选择器替换为 #oneBar div 并将 .standard:active 替换为 #oneBar div:active。

A demo at jsFiddle.

【讨论】：

谢谢你！那个 JS 小提琴真的帮助展示了我在寻找什么:) 问题回答