JS如何写<style></style>

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS如何写<style></style>相关的知识,希望对你有一定的参考价值。

不是改变一个元素的CSS样式 是像写
<style>.aawidth:100%;</style>
这种 写一个CSS在页面里面 如何写?

参考技术A var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode(".aawidth:100%;"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

参考技术B document.write("<style>.aawidth:100%;</style>");本回答被提问者采纳

js 写一个滚动条

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自己练习写一个滚动条</title>
<style>
*{
margin:0;
padding: 0;
}
.scroll{
margin:200px;
width:500px;
height:5px;
background: #ccc;
position: relative;
}
.bar{
width:10px;
height:20px;
background: #369369;
position: absolute;
top:-7px;
left:0;
cursor: pointer;
}
.mask{
position: absolute;
left:0;
top:0;
background: #369369;
width:0px;
height:5px;
}
</style>
</head>
<body>
<div class="scroll" id="scroll">
<div class="bar" id="bar"></div>
<div class="mask" id="mask"></div>
</div>
<p></p>
<script>
window.onload = function(){
var scroll = document.getElementById(\'scroll\');
var bar = document.getElementById(\'bar\');
var mask = document.getElementById(\'mask\');
var ptxt = document.getElementsByTagName(\'p\')[0];
bar.onmousedown = function (event){
// Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
// 事件通常与函数结合使用,函数不会在事件发生前被执行!
var event = event || window.event;
//相对于浏览器的x轴距离,,, 相对于父元素的左内边距的距离
// 获取到点击轴的距离屏幕的距离
var leftVal = event.clientX - this.offsetLeft;
console.log(leftVal);
var that = this;
//拖动
document.onmousemove = function(event){
var event = event || window.event;
// 获取移动的x轴距离,可能是正值,负值,
var barleft = event.clientX-leftVal;
//console.log(barleft);
console.log(scroll.offsetWidth);
console.log(bar.offsetWidth)
if(barleft<0){
barleft = 0;
//offsetWidth:元素在水平方向上占据的大小,无单位
}else if(barleft > scroll.offsetWidth - bar.offsetWidth){
barleft = scroll.offsetWidth - bar.offsetWidth;

}
mask.style.width = barleft+\'px\';
that.style.left = barleft+\'px\';
ptxt.innerHTML = \'已经走啦\' + parseInt(barleft/(scroll.offsetWidth-bar.offsetWidth)*100)+\'%\';
//获取光标的当前位置,这个是兼容写法,后面的是ie8及以下的,

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
};
document.onmouseup = function(){
document.onmousemove = null; //弹起鼠标不做任何操作
}
}
</script>
</body>
</html>

 


以上是关于JS如何写<style></style>的主要内容,如果未能解决你的问题,请参考以下文章

如何利用js实现在指定节点添加style?

JS如何写tab选项卡的循环切换,并且如果选中当前选项卡的,则要从选中的下一个开始循环

java如何执行javascript操作html

js如何点击左右按钮切换图片

急!网页 style中如何直接使用变量

js 写一个滚动条