我找不到一种方法来更改抽屉汉堡图标。让我们看看代码说了什么:
代码
输出结果
图标似乎是动态添加的,颜色设置为白色:
当我在我的Chromium控制台中更改其颜色时,一切都正常。但是如果我尝试使用CSS类,则不起作用:
我的问题:
除了通过DOM动态更改颜色或直接修改material.min.js文件,我还有其他解决方案吗?
(使用JavaScript也没有成功更改颜色)
谢谢!♫♪ 我祝你圣诞快乐 ♫♪♫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>drawer icon color</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header"></header>
<div class="mdl-layout__drawer"></div>
</div>
</body>
</html>
输出结果
图标似乎是动态添加的,颜色设置为白色:
当我在我的Chromium控制台中更改其颜色时,一切都正常。但是如果我尝试使用CSS类,则不起作用:
.mdl-layout__header .mdl-layout__drawer-button {
color: #000 !important;
}
我的问题:
除了通过DOM动态更改颜色或直接修改material.min.js文件,我还有其他解决方案吗?
(使用JavaScript也没有成功更改颜色)
<script type="text/javascript">
document.querySelector(".mdl-layout__header .mdl-layout__drawer-button").style.color = "red";
</script>
谢谢!♫♪ 我祝你圣诞快乐 ♫♪♫