Javascript 访问div元素_Javascript_Html_Css

Javascript 访问div元素

javascript html css

Javascript 访问div元素,javascript,html,css,Javascript,Html,Css,我已经创建了一个webside，其中有一个id为“buttons”的div元素。下面您可以看到我是如何创建带有字母表的按钮的。一切都很好，一切正常。但现在我只能看到一个按钮/26个按钮中的一个字母。。这样我就可以改变一个按钮的不透明度。（我能处理的就是让它们变得更透明！）也许有人能帮我-谢谢 var buttons = function () { myButtons = document.getElementById("buttons"); letters = docume

我已经创建了一个webside，其中有一个id为“buttons”的div元素。下面您可以看到我是如何创建带有字母表的按钮的。一切都很好，一切正常。但现在我只能看到一个按钮/26个按钮中的一个字母。。这样我就可以改变一个按钮的不透明度。（我能处理的就是让它们变得更透明！）也许有人能帮我-谢谢

var buttons = function () {
    myButtons = document.getElementById("buttons");
    letters = document.createElement('ul');
    for (var i = 0; i < alphabet.length; i++) {
        letters.id = 'alphabet';
            list = document.createElement('li'); 
            list.id = 'letter';
            list.innerHTML = alphabet[i];
        check();
            myButtons.appendChild(letters);
            letters.appendChild(list);
        }
  }

var按钮=函数（）{
myButtons=document.getElementById（“按钮”）；
字母=document.createElement（'ul'）；
对于（变量i=0；i

您可以使用

list.id='letter'+i

设置列表元素的id

然后您可以使用

document.getElementById（'letter'）

-访问每个按钮，第一个按钮是

document.getElementById（'letter0'）

，依此类推

你应该移动

letters.id='alphabet'位于for循环之外，因为您不必在每个循环中设置id。
您可以使用list.id='letter'+i
设置列表元素的id
然后您可以使用document.getElementById（'letter'）
-访问每个按钮，第一个按钮是document.getElementById（'letter0'）
，依此类推
你应该移动letters.id='alphabet'在for循环之外，因为不必在每个循环中设置id
我更新了你的代码，你可以看看例子
示例：

var alphabet=“ABCDEFGHIJKLMNOPQRSTUVWXYZ”/*刚刚定义了这个剪接测试*/
变量按钮=功能（ID）{
var ul=document.createElement（'ul'）；
ul.id=‘字母表’；
对于（变量i=0；i


我更新了你的代码，你可以看看例子
示例：

var alphabet=“ABCDEFGHIJKLMNOPQRSTUVWXYZ”/*刚刚定义了这个剪接测试*/
变量按钮=功能（ID）{
var ul=document.createElement（'ul'）；
ul.id=‘字母表’；
对于（变量i=0；i

您不能对不同的元素使用相同的ID（您创建了多个元素并为其提供了相同的ID）
这里是另一种解决您所展示的问题的方法。（不使用“id”字段），只是因为您已经正确地使用“id”属性得到了非常好的答案
<!doctype html>
<html>
    <head>
        <title>
            Test
        </title>
        <script type='text/javascript'>
            'use strict';
            var m_Buttons = [];
            function Init() {
                var myButtons = document.getElementById("buttons");
                var alphabet = ['a','b','c','d','e','f','g']; //go on with letters yourself
                var ul = document.createElement('ul');
                var li = null;
                for (var i=0; i<alphabet.length; i++) {
                    li = document.createElement('li');
                    li.innerHTML = alphabet[i];
                    ul.appendChild(li);
                    m_Buttons.push (li);
                }
                myButtons.appendChild(ul);
            }

            function getButton(button_index) {
                m_Buttons[button_index].style.color = 'red';
                return Buttons[button_index];
            }
        </script>
    </head>
    <body onload='Init();'>
        <div id='buttons'>
        </div>
        <button onclick='getButton(3);'> Click to get button 3 </button>
    </body>
</html>


试验
"严格使用",；
var m_按钮=[]；
函数Init（）{
var myButtons=document.getElementById（“按钮”）；
var alphabet=['a'、'b'、'c'、'd'、'e'、'f'、'g']；//自己写字母吧
var ul=document.createElement（'ul'）；
var li=null；
对于（var i=0；i您不能对不同的元素使用相同的ID（您创建了多个元素并为其提供了相同的ID）
这里是另一个解决您所展示问题的方法（不使用“id”字段），因为您已经有了非常好的答案，正确地使用了“id”属性
<!doctype html>
<html>
    <head>
        <title>
            Test
        </title>
        <script type='text/javascript'>
            'use strict';
            var m_Buttons = [];
            function Init() {
                var myButtons = document.getElementById("buttons");
                var alphabet = ['a','b','c','d','e','f','g']; //go on with letters yourself
                var ul = document.createElement('ul');
                var li = null;
                for (var i=0; i<alphabet.length; i++) {
                    li = document.createElement('li');
                    li.innerHTML = alphabet[i];
                    ul.appendChild(li);
                    m_Buttons.push (li);
                }
                myButtons.appendChild(ul);
            }

            function getButton(button_index) {
                m_Buttons[button_index].style.color = 'red';
                return Buttons[button_index];
            }
        </script>
    </head>
    <body onload='Init();'>
        <div id='buttons'>
        </div>
        <button onclick='getButton(3);'> Click to get button 3 </button>
    </body>
</html>


试验
"严格使用",；
var m_按钮=[]；
函数Init（）{
var myButtons=document.getElementById（“按钮”）；
var alphabet=['a'、'b'、'c'、'd'、'e'、'f'、'g']；//自己写字母吧
var ul=document.createElement（'ul'）；
var li=null；
对于（var i=0；i创建一个代码笔或小提琴，这样我们就可以看到问题所在了。@hunzaboy-没有必要求助于第三方网站：你不能在字母表按钮中添加一个额外的id
，然后用CSS将相关的id
指向它吗？将list.id='letter'
更改为list.id=alphabet[i]
可能您的li
的所有id都是相同的字母
，这是无效的创建代码笔或小提琴以便我们可以看到问题所在。@hunzaboy-没有必要求助于第三方网站：您能不能在字母表按钮中添加一个额外的id
，然后用CSS将相关的id
作为目标将list.id='letter'
更改为list.id=alphabet[i]
可能您的li
的所有id都是相同的letter
，这是无效的