最近の勉強
54655 ワード
登録ページ
css擬似クラスセレクタ
jsを使用してHTML要素を制御する
jsを使用してcssを制御する
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testtitle>
<style>
a {
text-decoration: none;
}
style>
head>
<body>
<h4> , h4>
<table width="500px" border="0" >
<tr>
<td> ：td>
<td>
<input type="radio" name="sex" id="nan"> <label for="nan"> label>
<input type="radio" name="sex" id="nv"> <label for="nv"> label>
td>
tr>
<tr>
<td> td>
<td>
<select>
<option>-- --option>
<option>2001option>
<option>2002option>
<option>2003option>
select>
<select>
<option>-- --option>
<option>1option>
<option>2option>
<option>3option>
<option>4option>
<option>5option>
<option>6option>
<option>7option>
<option>8option>
<option>9option>
<option>10option>
<option>11option>
<option>12option>
select>
<select>
<option>-- --option>
<option>1option>
<option>2option>
<option>3option>
select>
td>
tr>
<tr>
<td> td>
<td><input type="text" value=" ">td>
tr>
<tr>
<td> td>
<td>
<input type="radio" name="marry" id="1" checked="checked"> <label for="1"> label>
<input type="radio" name="marry" id="2"> <label for="2"> label>
<input type="radio" name="marry" id="3"> <label for="3"> label>
td>
tr>
<tr>
<td> ：td>
<td><input type="text" value=" ">td>
tr>
<tr>
<td> td>
<td><input type="checkbox" name="love" id="11"><label for="11"> label>
<input type="checkbox" name="love" id="12"><label for="12"> label>
<input type="checkbox" name="love" id="13"><label for="13"> label>
<input type="checkbox" name="love" id="14"><label for="14"> label>
<input type="checkbox" name="love" id="15"><label for="15"> label>
td>
tr>
<tr>
<td> td>
<td>
<textarea> textarea>
td>
tr>
<tr>
<td>td>
<td>
<input type="submit" value=" ">
td>
tr>
<tr>
<td>td>
<td>
<input type="checkbox" checked="checked">
td>
tr>
<tr>
<td>td>
<td>
<a href="#"> ， a>
td>
tr>
<tr>
<td>td>
<td>
<h5> h5>
<ul>
<li> 18 ， li>
<li> li>
<li> li>
ul>
td>
tr>
table>
body>
html>
css擬似クラスセレクタ
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css title>
<style>
/* ， */
/*1. */
a:link {
color: #333;
text-decoration: none; /* */
}
/*2. */
a:visited {
color: #8bff6d;
}
/*3. */
a:hover {
color: #ff5438;
}
/*4. */
a:active {
color: aqua;
}
/* :focus */
input:focus {
background-color: #ff5438;
color: #8bff6d;
}
style>
head>
<body>
<a href="#"> a> <br>
<a href="#"> a>
<input type="text">
body>
html>
jsを使用してHTML要素を制御する
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> js HTML </title>
</head>
<body>
<h1 id="s123"> HTML</h1>
<p id="qwe"> HTML</p>
<script>
//document.getElementById("s123")
//innerHTML=
document.getElementById("s123").innerHTML=" js";
document.getElementById("qwe").innerHTML=" js";
</script>
</body>
</html>
jsを使用してcssを制御する
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> js css</title>
<style>
h1 {
color: red;
}
p {
height: 123px;
width: 123px;
background-color: #8bff6d;
color: red;
}
</style>
</head>
<body>
<h1 id="s123"> HTML</h1>
<p id="qwe"> HTML</p>
<script>
//document.getElementById("s123")
//innerHTML=
document.getElementById("s123").innerHTML=" js";
document.getElementById("qwe").innerHTML=" js";
// css
document.getElementById("s123").style.color="blue";
document.getElementById("qwe").style.backgroundColor="black";
</script>
</body>
</html>