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

时间:2017-11-09 08:40:40

标签: javascript html

好吧,我正在努力:



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

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

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

仍然无法正常工作,是否有遗漏?

提前致谢

4 个答案:

答案 0 :(得分:2)

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

在你的情况下,改变这一行:

var child = element[0].firstElementChild;

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

答案 1 :(得分:0)

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

以下是我修复它的方法:

我从

改变了这一行
var element = document.getElementsByClassName("tab active");

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

答案 2 :(得分:0)

你可以使用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>

答案 3 :(得分:0)

为什么这不起作用是因为 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);
                }
            });
        }
    }