A Pen by ChihiroMazda.

Example-for-querySelector.markdown

Example for querySelector

Example for querySelector and querySelectorAll.

A Pen by ChihiroMazda on CodePen.

License.

index.html

<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>

script.js

//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';
}

style.css

.list {
  position: absolute;
  top: 4.35rem;
  right: 0;
  left: 0;
  bottom: 0;
}
.topcoat-icon {
  font-size: 1.55rem;
}

Topcoat-starter-project.markdown

Topcoat starter project

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

A Pen by ChihiroMazda on CodePen.

License.