最新版のレッスンがあります
【最新版】はじめてのJavaScript (全7回)
動画の読み込みに失敗しました。しばらく待ってからリロードしてみてください。解決しない場合は ヘルプ「動画が見られない場合について」 もご覧ください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>My Site</title>
<style>
img {
border-radius: 50%;
cursor: pointer;
transition: border-radius .5s;
}
.changed {
border-radius: 0;
}
section {
border-width: 1px;
border-color: gray;
border-style: solid;
border-radius: 8px;
padding: 16px;
margin-bottom: 8px;
background-image: url(background.png);
}
body {
text-align: center;
}
</style>
</head>
<body>
<section>
<img src="icon.png" alt="太郎のアイコン画像です" id="trigger">
<h1>山田太郎</h1>
<p id="target">UI/UXデザイナー見習いです。日々の勉強、がんばっています。</p>
</section>
<footer>(c) dotinstall.com</footer>
<script>
'use strict';
function process() {
document.getElementById('target').textContent = 'すっごく真面目です！';
}
document.getElementById('trigger').addEventListener('click', process);
</script>
</body>
</html>
サーバーとの接続が切断されました。ブラウザを再読込してみてください。
保存しました
ファイル構成
- index.html
ブラウザ実行環境を使ってみよう！
このレッスンでは、こちらにコードを打ち込みながら学習を進めていくことができます。
手元で実際に動作を確認しながら理解を深めていくと良いでしょう。
この機能を利用するには無料のユーザー登録が必要です。
補足情報 classList.add() について
classList.add() について詳しく知りたい方は以下のレッスンも参考にしてみてください。
https://dotinstall.com/lessons/basic_javascript_dom_v2/52908