#によるジャンプ表示とfontでh1を拡大、jsのヘッダー配置とbody内自由出力、ブラウザ判定とスタイル特化の可能性。
前回、旧htmlと新htmlの違いにより機能の出来なかったのを、補正します。
name から id になりnameではできませんでした。
書籍の誤植によるとみられるスペル抜けで、新スペルがタイプミスと思われる不全を起こしました。
jsは設置場所によりエラーで止まることがあったのを改善してみました。
ブラウザの検出が出来るようになり、幅が増えたかも知れません。
全体
test6.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
body {
margin: 8px;
padding: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
color: #333333;
}
.h1_main {
font-family: Arial, sans-serif;
color: #aaaaff;
font-size: 60px;
font-weight: bold;
text-decoration-line: underline overline;/* 本の植字ミス? */
}
</style>
<script>
var setup = 0;
function statoup(){
setup = 1;
var userAgent = window.navigator.userAgent.toLowerCase();
var dspua;
if (userAgent == "") {
userAgent = "サポート外"
dspua = '不明';//その他のブラウザ向けの記述
} else if (userAgent.indexOf('opr') != -1) {
dspua = 'opr';//IE向けの記述
} else if (userAgent.indexOf('edg') != -1) {
dspua = 'edge';///旧Edge向けの記述
} else if (userAgent.indexOf('chrome') != -1) {
dspua = 'chrome';//Google Chrome向けの記述
} else if (userAgent.indexOf('safari') != -1) {
dspua = 'safari';///Safari向けの記述
} else if (userAgent.indexOf('firefox') != -1) {
dspua = 'firefox';///FireFox向けの記述
} else {
dspua = '不明';//その他のブラウザ向けの記述
}
if (dspua == "chrome") {
this.style.fontFamily = "Noto Sans JP, sans-serif"; //Google Chrome向けの記述
}
document.querySelector('#ua').innerHTML = dspua;
}
function disp_js(){
if (setup == 0){alert('not set');return;}
document.getElementById('disp_in_html').innerHTML = in_html1;
}
let in_html1 = "test settchi.";
</script>
<title>Test 6</title>
</head>
<body>
<!-- https://qiita.com/tattyan39/items/324cd94c96089f3d9cd6 back 参照-->
<p id="start" align="center"><font class="h1_main">Welcome <font color="#00f">to</font> Test 6</font></p>
<p>This is a simple HTML document.</p>
<div id="my_js_stato">none running This white.</div>
<script>
disp_in();
function disp_in(){
document.getElementById('my_js_stato').innerHTML = "it ok.";
}
</script>
<br>
<button type="button" onclick="disp_js();">押してください下に変更が出ます</button>
<br>
<br>
<br>
<br>
<div id="disp_in_html">osarete nai.</div>
<br>
<br>
<br>
<br>
<br><div id="ua"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="#start">Back to Start</a>
<a id="end">end</a>
</body>
<script>statoup();</script>
</html>
copilot.txt
// コピロット参照
function applyStyleByBrowser() {
const ua = navigator.userAgent.toLowerCase();
let css = "";
if (ua.indexOf('chrome') !== -1) {
css = "body { font-family: 'Noto Sans JP', sans-serif; background-color: #e0f7fa; }";
} else if (ua.indexOf('firefox') !== -1) {
css = "body { font-family: 'Georgia', serif; background-color: #fff3e0; }";
} else {
css = "body { font-family: 'Courier New', monospace; background-color: #eeeeee; }";
}
document.getElementById('dynamic-style').innerHTML = css;
}
検証と可能性を考えてのtestです。copilot参照もよかったら。。。