Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Pen by ChihiroMazda.
<div class="topcoat-grid">
<header class="topcoat-navigation-bar topcoat-grid__row">
<div class="topcoat-navigation-bar__item topcoat-grid__column--1">
<button class="topcoat-icon-button--quiet">
<span class="topcoat-icon icomatic">back</span>
</button>
</div>
<div class="topcoat-navigation-bar__item topcoat-grid__column--auto center">
<h1 class="topcoat-navigation-bar__title">Example for querySelector</h1>
</div>
</header>
<div class="topcoat-list list">
<h3 class="topcoat-list__header">Category</h3>
<ul class="topcoat-list__container">
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
<li class="topcoat-list__item">
Item
</li>
</ul>
</div>
//querySelector
var Btn = document.querySelector('.topcoat-icon-button--quiet');
var content = document.querySelector('.topcoat-list');
Btn.addEventListener('click', btnAction, false);
function btnAction () {
alert('foo');
}
//querySelectorAll
var list__item = document.querySelectorAll('.topcoat-list__item');
for(var i in list__item){
list__item[i].style.color = 'blue';
}
.list {
position: absolute;
top: 4.35rem;
right: 0;
left: 0;
bottom: 0;
}
.topcoat-icon {
font-size: 1.55rem;
}

Topcoat starter project

Very basic Topcoat starter project. It already includes the Mobile dark styles and icons.

A Pen by ChihiroMazda on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment