我在1 html 1 css和1 js中打开1 html文件时遇到麻烦，有人可以帮我忙吗？
[英]i'm having trouble turning 1 html file in 1 html 1 css and 1 js can some one give me a hand?
问题描述
so i've started coding but i guess i'm dumb becuase i havan't been able to split this code i'd apreciate some help 
所以我已经开始编码，但我想我很傻，因为我无法拆分此代码，我希望能有所帮助
<html>
<head>
<title>Exploring HTML</title>
<style>
body {
color: red;
}
h1 {
font-family: Arial, sans-serif;
font-size: 32px;
color: black;
}
</style>
</head>
<body>
<h1>My first web page</h1>
<p>This is my first web page, it's a little basic, but it's helping me understand how HTML works and how to markup my content.</p>
<button id="color">Change color!</button>
<script src="js.js">
</script>
</body>
</html>
2 个解决方案
解决方案1
3 2015-03-28 21:38:42
This is how you can split up your webpage into different files. 这样可以将网页拆分为不同的文件。 You want to use link in the head tag to include external CSS files. 您想要使用head标签中的link来包含外部CSS文件。 For external script files you still use the <script> tag but you don't insert any content to it, you apply the src attribute. 对于外部script文件，您仍然使用<script>标记，但不向其中插入任何内容，而是应用src属性。 <script> tags can be either in the head or the body tag, usually it's better to add it to the end of the body tag to prevent render blocking. <script>标签可以在head或body标签中，通常最好将其添加到body标签的末尾以防止渲染阻塞。
index.html index.html
<html>
<head>
<title>Exploring HTML</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Body Content -->
<div id="color">Click Here to Rotate Colors</div>
<script src="script.js"></script>
</body>
</html>
style.css style.css
body {
color: red;
}
h1 {
font-family: Arial, sans-serif;
font-size: 32px;
color: black;
}
script.js script.js
(function() {
// Set the variable "node" and set the event listener on click
var node = document.getElementById('color');
node.addEventListener('click',changeColor,false);
function changeColor(e) {
// Get the target (node) that the user clicked
var target = e.target || e.srcElement;
// Get the color from the data-color attribute
var color = target.getAttribute('data-color');
// Define the colors to rotate
var colors = ['red','green','blue'];
// Get the position of the color. red = 0, green = 1, etc
var index = colors.indexOf(color);
// If the index is the last item in the array you want
// to change the index to 0 otherwise it increases by 1
var next = (index+1 == colors.length ? 0 : index+1);
// Set the new color and the data-color attribute
target.style.color = colors[next];
target.setAttribute('data-color',colors[next]);
}
})();
A working example of the above code can be found at JSFiddle . 可以在JSFiddle找到上述代码的工作示例。 The reason I'm setting data-color instead of reading the style.color variable is because I'm unsure if some browsers may modify this value in different ways. 我设置data-color而不是读取style.color变量的原因是因为我不确定某些浏览器是否可以以不同方式修改此值。 I know for a fact that the browser will not modify the data-color attribute. 我知道浏览器不会修改data-color属性。
解决方案2
0 2015-03-28 21:38:26
these links should help you get an answer 这些链接应该可以帮助您获得答案
http://www.w3schools.com/css/css_howto.asp http://www.w3schools.com/css/css_howto.asp
http://www.w3schools.com/js/js_whereto.asp http://www.w3schools.com/js/js_whereto.asp
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.