- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试将 Div 的内容获取到另一个 div 中。基本上我已经使用 php 创建了一个动态颜色“选择器”,我想添加内部 div 的内容,即。单击相关颜色时将颜色名称传递给 JavaScript 变量。
看看这支笔
http://codepen.io/anon/pen/oXopmq
function coloursel() {
var colour = document.getElementById("patchholder").firstChild.innerHTML;
alert(colour);
}
/* shirt color name display style*/
#patchhome {
position:relative;
bottom:240px;
display:inline-block;
font-size: 13px;
margin:3px;
}
#patchhome p{
font-size: 10px;
margin-bottom:5px;
display:inline-block;
}
#patchhome h2{
margin-left:-3px;
}
.colourname{
white-space:nowrap;
display:none;
position:absolute;
top :145px;
float:right;
right:-3px;
}
.patchholder{
float:left;
font-size: 0;
position:relative;
display:inline-block;
margin:2px;
height:16px;
width:16px;
}
.patchholder:hover + div{
display:inline-block;
margin:1px;
float:left;
}
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Antique Cherry" style="background:#971B2F;display:inline-block;"/><div id="colourname"class="colourname">Antique Cherry</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Cherry Red" style="background:#AC2B37;display:inline-block;"/><div id="colourname"class="colourname">Cherry Red</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Daisy" style="background:#FED141;display:inline-block;"/><div id="colourname"class="colourname">Daisy</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Forrest Green" style="background:#273B33;display:inline-block;"/><div id="colourname"class="colourname">Forrest Green</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heather Orange" style="background:#FF8D6D;display:inline-block;"/><div id="colourname"class="colourname">Heather Orange</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Black" style="background:#000000;display:inline-block;"/><div id="colourname"class="colourname">Black</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="White" style="background:#FFFFFF;display:inline-block;"/><div id="colourname"class="colourname">White</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Navy" style="background:#002A5C;display:inline-block;"/><div id="colourname"class="colourname">Navy</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heliconia" style="background:#DB3E79;display:inline-block;"/><div id="colourname"class="colourname">Heliconia</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Kiwi" style="background:#A3A76D;display:inline-block;"/><div id="colourname"class="colourname">Kiwi</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Orange" style="background:#DF6426;display:inline-block;"/><div id="colourname"class="colourname">Orange</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Royal" style="background:#224D8F;display:inline-block;"/><div id="colourname"class="colourname">Royal</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Sport Grey" style="background:#AFAFAF;display:inline-block;"/><div id="colourname"class="colourname">Sport Grey</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heather Irish Green" style="background:#00966C;display:inline-block;"/><div id="colourname"class="colourname">Heather Irish Green</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Cardinal" style="background:#8D2838;display:inline-block;"/><div id="colourname"class="colourname">Cardinal</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Chestnut" style="background:#83635C;display:inline-block;"/><div id="colourname"class="colourname">Chestnut</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="DK Chocolate" style="background:#423238;display:inline-block;"/><div id="colourname"class="colourname">DK Chocolate</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heather Military Green" style="background:#7E7F74;display:inline-block;"/><div id="colourname"class="colourname">Heather Military Green</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heather Purple" style="background:#614B79;display:inline-block;"/><div id="colourname"class="colourname">Heather Purple</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Indigo Blue" style="background:#486D87;display:inline-block;"/><div id="colourname"class="colourname">Indigo Blue</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Light Blue" style="background:#A3B3CB;display:inline-block;"/><div id="colourname"class="colourname">Light Blue</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Purple" style="background:#3F2A56;display:inline-block;"/><div id="colourname"class="colourname">Purple</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Sand" style="background:#CABFAD;display:inline-block;"/><div id="colourname"class="colourname">Sand</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Antique Heliconia" style="background:#AA0061;display:inline-block;"/><div id="colourname"class="colourname">Antique Heliconia</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Charcoal" style="background:#66676C;display:inline-block;"/><div id="colourname"class="colourname">Charcoal</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Cobalt" style="background:#374393;display:inline-block;"/><div id="colourname"class="colourname">Cobalt</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="DK Heather" style="background:#3F4444;display:inline-block;"/><div id="colourname"class="colourname">DK Heather</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heather Navy" style="background:#333F48;display:inline-block;"/><div id="colourname"class="colourname">Heather Navy</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heather Royal" style="background:#307FE2;display:inline-block;"/><div id="colourname"class="colourname">Heather Royal</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Irish Green" style="background:#009E69;display:inline-block;"/><div id="colourname"class="colourname">Irish Green</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Military Green" style="background:#63655A;display:inline-block;"/><div id="colourname"class="colourname">Military Green</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Red" style="background:#B1302A;display:inline-block;"/><div id="colourname"class="colourname">Red</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Sapphire" style="background:#0077B5;display:inline-block;"/><div id="colourname"class="colourname">Sapphire</div></span>
<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Antique Sapphire" style="background:#006A8E;display:inline-block;"/><div id="colourname"class="colourname">Antique Sapphire</div></span>
抱歉,如果这个写得不好,实践不好,在错误的地方或者之前被问过。我还在学习中。
无论如何,感谢您的浏览。
最佳答案
当您为多个元素提供相同的 id(在本例中为占位符)时,DOM 只能识别最后一个元素。在这种情况下,您应该将 colorsel 函数修改为以下内容
function coloursel(elem) {
var colour = elem.firstChild.innerHTML;
alert(colour);
}
关于javascript - 关于。获取内部Div内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31027500/
这是我的测试用例。 http://tobeythorn.com/isi/dummy2.svg http://tobeythorn.com/isi/isitest.html 如果我自己打开 svg,内部
这是我的测试用例。 http://tobeythorn.com/isi/dummy2.svg http://tobeythorn.com/isi/isitest.html 如果我自己打开 svg,内部
我正在尝试做类似的事情: SELECT SUM( CASE WHEN ( AND EXISTS(SELECT 1
我想问如何在外部 ng-repeat 内部正确使用内部 ng-repeat: 这意味着你想使用这样的东西: {{milestone.id}} {{
我希望在 wordpress 的仪表板内编辑 css 样式并且如果可能的话不必编辑 php 文件。 我知道至少可以编辑一些属性,所以我希望我可以直接在仪表板中编辑所有属性。 更具体地说如何更改自定义类
我在安装在 windows10 上的 vmware 中的 Ubuntu 上安装了伪分布式独立 hadoop 版本。 我从网上下载了一个文件,复制到ubuntu本地目录/lab/data 我在 ubun
我有一个如下所示的 WHERE 语句: WHERE ((@Value1 IS NULL AND [value1_id] IS NULL) OR [value1_id] = ISNULL(@Va
我有一个如下所示的 WHERE 语句: WHERE ((@Value1 IS NULL AND [value1_id] IS NULL) OR [value1_id] = ISNULL(@Va
在我的一些测试帮助程序代码中,我有一个名为 FakeDbSet(Of T) 的 IDbSet(Of T) 实现,它模拟了许多 EF 行为,但没有实际的数据库。我将类声明为 Friend ,因为我想强制
我正在寻找 Cassandra/CQL 的常见 SQL 习语 INSERT INTO ... SELECT ... FROM ... 的表亲。并且一直无法找到任何以编程方式或在 CQL 中执行此类操作
如何防止内部 while 循环无限运行?问题是,如果没有外部 while 循环,内部循环将毫无问题地运行。我知道它必须对外循环执行某些操作,但我无法弄清楚是什么导致了问题。 import java.u
我正在努力学习更多有关 C++ 的知识,但在国际象棋程序中遇到了一些代码,需要帮助才能理解。我有一个 union ,例如: union b_union { Bitboard b; st
这是我项目网页中的代码片段。这里我想显示用户选择的类别,然后想显示属于该类别的主题。在那里,用户可以拥有多个类别,这没有问题。我可以在第一个 while 循环中打印所有这些类别。问题是当我尝试打印主题
我想知道如何在 swing 中显示内部框架。这意味着,当需要 JFrame 时,通常我所做的是, new MyJFrame().setVisible(true); 假设之前的表单也应该显示。当显示这个
我最近发现了一些有趣的行为,这让我想知道对象如何知道存在哪些全局变量。例如,假设我有一个文件“test.py”: globalVar = 1 toDelete = 2 class Test(objec
我知道它已经在这里得到回答: google maps drag and drop objects into google maps from outside the Map ,但这并不完全是我所需要的
我目前正在学习Javascript DOM和innerHTML,发现在理解innerHTML方面存在一些问题。 这是我的代码:http://jsfiddle.net/hphchan/bfjx1w70/
我构建了一个布局如下的库: lib/ private_class_impl.cc private_class_decl.h public_class_impl.cc include/
我有一个使用 bootstrap 3 的组合 wordpress 网站。它基本上是一个图像网格。当屏幕展开时,它会从三列变为四列。移动时它是一列。 我想出了如何调整图像的顶部和底部边距,但我希望图像的
我正在试用 MSP-EXP430G2 的教程程序,使用 Code Composer Studio 使 LED 闪烁。最初,它有一个闪烁的无限循环: for(;;) // This emp
我是一名优秀的程序员,十分优秀!