本文目录一览：
- 1、JS调用CSS样式表问题（功能鼠标经过文本域是文本域边框颜色发生变化『给出能够实现功能的源码』）
- 2、JS中改变CSS样式的问题
- 3、css怎么样制作钟表
- 4、如何用JS修改已加载的CSS样式表样式？
- 5、关于CSS样式表和JS之间的影响。
- 6、如何为网页JavaScript添加CSS样式表
JS调用CSS样式表问题（功能鼠标经过文本域是文本域边框颜色发生变化『给出能够实现功能的源码』）
用CSS：
input:hover {border: 5px solid #000;}
用Javascript：
input name="" type="text" onmouseover="this.style.border = '5px solid #000';" onmouseout="this.removeAttribute('style');" /
JS中改变CSS样式的问题
其实你的代码没有问题，是一个先后顺序。浏览器解析，读取时的先后问题，你的onload表示，浏览器加载页面开始就调用这个方法，他这个时候还没有读取到下面的div呢
你不要放在head标签里面的，正规的写法其实应该放在/body后面，这样不论怎么样都可以的，保证正确
css怎么样制作钟表
代码如下：
!DOCTYPE html
html lang="en" xmlns=""
head
meta charset="utf-8" /
titlecanvas实例--制作时钟/title
/head
body
canvas id="canvas" width="500" height="500"
您的浏览器版本太低啦！可以换了！
/canvas
script
//获取canvas
var canvas = document.getElementById("canvas");
//设置环境
var cxt = canvas.getContext("2d");
//制作时钟的函数
function DrawClock() {
//清除画布
cxt.clearRect(0,0,500,500);
//获取当前时间的时，分，秒
var now = new Date();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
//小时必须获取浮点型（小时+分数---转化为的小时）
hour = hour + min / 60;
//将24小时转换为12小时
hour = hour 12 ? hour - 12 : hour;
//制作表盘
cxt.beginPath();
cxt.lineWidth = 10;
cxt.strokeStyle = "#ABCDEF";
cxt.arc(250, 250, 200, 0, 360, false);
cxt.stroke();
cxt.closePath();
//刻度
//时针
for (var i = 0; i 12; i++) {
cxt.save();
cxt.lineWidth = 7;
cxt.strokeStyle = "red";
//设置0,0点
cxt.translate(250, 250);
//再设置旋转角度
cxt.rotate(i * 30 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -170);
cxt.lineTo(0, -190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//分针
for (var i = 0; i 60; i++) {
//为避免不同颜色的重叠，
//在时针刻度与分针刻度重叠的位置，不画分针
if (i % 5 == 0) continue;
cxt.save();
//设置刻度粗细
cxt.lineWidth = 5;
cxt.strokeStyle = "purple";
//设置画布的0,0点
cxt.translate(250, 250);
//设置旋转角度
cxt.rotate(i * 6 * Math.PI / 180);
//画分针刻度
cxt.beginPath();
cxt.moveTo(0, -180);
cxt.lineTo(0, -190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//时针
cxt.save();
//设置时针风格
cxt.lineWidth = 7;
cxt.strokeStyle = "pink";
//设置异次元空间的0,0点
cxt.translate(250, 250);
//设置旋转角度
cxt.rotate(hour * 30 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -140);
cxt.lineTo(0, 10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//分针
cxt.save();
//设置分针风格
cxt.lineWidth = 5;
cxt.strokeStyle = "orange";
//设置异次元空间的0,0点
cxt.translate(250, 250);
//设置旋转角度
cxt.rotate(min * 6 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -160);
cxt.lineTo(0, 15);
cxt.closePath();
cxt.stroke();
cxt.restore();
//秒针
cxt.save();
//风格
cxt.strokeStyle = "yellow";
cxt.lineWidth = 3;
//重置0，0点
cxt.translate(250, 250);
//设置旋转角度
cxt.rotate(sec*6*Math.PI/180);
//画图
cxt.beginPath();
cxt.moveTo(0, -170);
cxt.lineTo(0, 20);
cxt.stroke();
//画出时针，分针，秒针的交叉点
cxt.beginPath();
cxt.arc(0, 0, 5, 0, 360, false);
cxt.closePath();
//设置填充样式
cxt.fillStyle = "blue";
cxt.fill();
//设置笔触样式---秒针已设置
cxt.stroke();
//设置秒针前端的小圆点
cxt.beginPath();
cxt.arc(0, -150, 5, 0, 360, false);
cxt.closePath();
//设置填充样式
cxt.fillStyle = "blue";
cxt.fill();
//设置笔触样式
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//调用函数
DrawClock();
//设置时钟转动起来
setInterval(DrawClock, 1000);
/script
/body
/html
如何用JS修改已加载的CSS样式表样式？
js是无法直接修改css文件的，但可以通过取对象的方式修改对象的样式，通常有两种方法：
1、改变className，但首先在样式表中预设定样式类。
例如：document.getElementById('obj').className='...';
2、改变cssText。
例如：document.getElementById('obj').style.height='100px';
关于CSS样式表和JS之间的影响。
你好，其实原因很简单，因为你用js设置的时候，忘记加单位了：
!Doctype html
head
meta charset="utf-8"
title无标题文档/title
script type="text/javascript"
function changexy(){
var f = document.getElementById("f");
f.style.left = parseInt(f.style.left) + 1 + 'px';
f.style.top = parseInt(f.style.top) + 1 + 'px';
}
function run(){
setInterval(changexy, 150);
}
/script
/head
body onload="run()"
div id="f" style="width:100px; height:100px; background:#F00; position:absolute; left:10px; top:10px;"aaa/div
/body
/html
left、top上加上单位"px"就可以移动起来了，望采纳~~
如何为网页JavaScript添加CSS样式表
可以通过添加样式表ID并对其判断来实现：
[javascript] view plaincopy
if (!document.styleSheets['要建立的样式表ID如theforever']) { //先检查要建立的样式表ID是否存在，防止重复添加
var ss = document.createStyleSheet();
ss.owningElement.id = '要建立的样式表ID如theforever';
ss.cssText = '标签{display:inline-block;overflow:hidden;' +
// 这个注释只在当前JS中帮助理解，并不会写入CSS中
'text-align:left;width:300px;height:150px}' +
'.类名{……}' +
'#ID们{……}'
;
}
