Question

好吧，我正在努力：

＆＃13;

var element = document.getElementsByClassName("tab active");
var child = element.firstElementChild;
child.style.color = '#ffffff';
child.style.backgroundColor = '#004831';

＆＃13;

<li class="tab active">
  <a href="#">
    Annual Report
  </a>
 </li>

＆＃13;

此链接与上述相同：https://jsfiddle.net/zxcc0rce/3/

仍然无法正常工作，是否有遗漏？

提前致谢

Answer 1

getElementsByClassName将为您提供元素列表，您需要选择要应用哪种元素。

在你的情况下，改变这一行：

var child = element[0].firstElementChild;

https://jsfiddle.net/zxcc0rce/4/

Answer 2

修改你的小提琴，以便在这里工作：https://jsfiddle.net/zxcc0rce/5/

以下是我修复它的方法：

我从

改变了这一行

var element = document.getElementsByClassName("tab active");

到

var element = document.getElementsByClassName("tab active")[0];

Answer 3

你可以使用CSS样式

.active a {
  color: #FFF;
  background: #004831
}

<li class="tab active">
  <a href="#">
    Annual Report
  </a>
 </li>
 <li class="tab">
  <a href="#">
    Annual Report
  </a>
 </li>

Answer 4

为什么这不起作用是因为 getElementsByClassName 会返回所有匹配元素的列表。

因此，要修复它，您只需使用该列表中的第一个元素：

    package proba;

    import java.awt.BorderLayout;
    import java.awt.EventQueue;
    import java.util.ArrayList;
    import javax.swing.JFrame;
    import javax.swing.JList;
    import javax.swing.JScrollPane;
    import javax.swing.ListModel;
    import javax.swing.ListSelectionModel;
    import javax.swing.event.ListDataListener;

    public class Proba extends JFrame {
        ArrayList<String> al = new ArrayList<>();
        public Proba() {
            al.add("1111111");
            al.add("2222222");
            al.add("3333333");
            setLayout(new BorderLayout());
            MyListModel lm = new MyListModel();
            JList l = new JList(lm);
            l.setSelectionMode(ListSelectionModel.SINGLE_SELECTION);
            JScrollPane sp = new JScrollPane(l);
            add(sp, BorderLayout.CENTER);
        }

        class MyListModel implements ListModel {
            @Override
            public int getSize() {
                return al.size();
            }
            @Override
            public Object getElementAt(int index) {
                return al.get(index);
            }
            @Override
            public void addListDataListener(ListDataListener l) {
            }
            @Override
            public void removeListDataListener(ListDataListener l) {
            }
        }

        public static void main(String[] args) {
            EventQueue.invokeLater(new Runnable() {
                @Override
                public void run() {
                    Proba app = new Proba();
                    app.setSize(600, 480);
                    app.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                    app.setVisible(true);
                }
            });
        }
    }

使用javascript改变儿童元素背景颜色

4 个答案: