js设置cssmargin,js设置字体颜色代码

发布时间：2023-12-08

js设置cssmargin,js设置字体颜色代码

更新：2022-11-18 10:11

本文目录一览：

  1. 如何用JS修改已加载的CSS样式表样式？要详细的教程
  2. js 修改css属性值
  3. js获取css属性，更改margin-top属性，给每个a标签的margin-top属性在原基础上 +5px
  4. JavaScript是如何改变网页的CSS样式的？
  5. 如何用JavaScript设置Div的margin参数？

如何用JS修改已加载的CSS样式表样式？要详细的教程

js是无法直接修改css文件的，但可以通过取对象的方式修改对象的样式，通常有两种方法：

  1. 改变className，但首先在样式表中预设定样式类。
    例如：document.getElementById('obj').className='...';
  2. 改变cssText。
    例如：document.getElementById('obj').style.height='100px';

js 修改css属性值

想要改为什么不直接把CSS文件里的width:100xp改掉? 如果这个值因为其他地方也有用到所以不能改的话，那你就在CSS文件里再设个值：

width1:80xp

想用到80xp的话就调用width1好了，不要用width:100xp。

js获取css属性，更改margin-top属性，给每个a标签的margin-top属性在原基础上 +5px

可以参考下面的代码：

<style>
a {
    display:block;
    float:left;
}
</style>
<div style="border:1px solid #cccccc">
    <a id="a1" href="#" class="float_r" style="margin-top:10px;">asd</a>
    <a id="a2" href="#" class="float_r" style="margin-top:20px;">asd</a>
    <a id="a3" href="#" class="float_r" style="margin-top:30px;">asd</a>
    <a id="a4" href="#" class="float_r" style="margin-top:40px;">asd</a>
    <a id="a5" href="#" class="float_r" style="margin-top:50px;">asd</a>
</div>
<script>
for(var i=1; i < 6; i++) {
    document.getElementById('a'+i).style.marginTop = parseInt(document.getElementById('a'+i).style.marginTop) + 5 + 'px';
}
</script>

JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。

扩展资料：

JavaScript参考函数：

  • anchor("name")：用来把字符串转换为HTML锚面标志内（<A NAME=>）
  • big()：把字符串中的文本变成大字体（<BIG>）
  • blink()：把字符串中的文本变成闪耀字体（<BLINK>）
  • bold()：把字符串中的文本变成粗体（<B>）
  • fixed()：把字符串中的文本变成流动间距字体，类似电报形式（<TT>）
  • fontcolor(color)：设置字符串中文本的色彩（<FONT COLOR=>）
  • fontsize(size)：把字符串中的文本变成指定大小（<FONTSIZE=>）
  • italics()：把字符串中的文本变成斜字体（<I>）
  • link(url)：用来把字符串转换为HTML链接标志中（<A HREF=>） 参考资料来源：百度百科 - JavaScript

JavaScript是如何改变网页的CSS样式的？

通常我们将网页的样式和内容分开，样式放在CSS文件，内容放在HTML文件，当HTML文件需要用到样式的时候，直接引用CSS中定义的样式就可以了。其实JavaScript也能使用CSS文件或直接改变样式的属性来动态地改变网页的样式。

1. JavaScript设置内联样式

改变样式最直接的方法就是改变元素节点的style属性。例如：

myElement.style.color = "red";
myElement.style.left = "40px";
myElement.style.backgroundRepeat = "repeat-x";

JavaScript设置内联样式时，采用和CSS设置样式一样的风格。如设置myElement的color属性时，我们可以赋值任何在CSS中可以用的值，所以这里除了可以使用"red"，还可以使用"blue"、"yellow"或十六进制的"#ff0000"。 另外用JavaScript改变网页的属性还需要注意以下几点：

  • JavaScript中采用驼峰命名法：在CSS中，属性名中的单词之间是用横杠隔开，如font-weight、background-color。但在JavaScript中，横杠可能被认为是减号，所以采用驼峰命名法，单词之间不用横杠，如font-weight在JavaScript中应该写成fontWeight；而background-color写成backgroundColor。
  • JavaScript中属性值为字符串：在CSS中，属性值都写在双引号中，即要用字符串来给CSS相关属性赋值，同样当属性值有单位时，我们需要将单位也写在字符串中。

2. JavaScript设置外部样式

当你需要改变的样式已经在CSS文件中定义了，我们也可以用JavaScript直接用定义好的CSS样式。如下格式：

myElement.className = "someCSSclass";

同样需要注意以下几点：

  • 不要将className写成class，因为class是JavaScript保留的关键字，我们不能使用。
  • 将定义在CSS中的样式直接赋值给className，就能改变myElement元素的样式。
  • 当要删除元素的样式，可以给className属性赋值为空。例如：
myElement.className = "";

教程网站 - 秒秒学上的JavaScript课程有一个章节专门讲解JavaScript改变样式的内容，可以看看，希望对你有帮助。

如何用JavaScript设置Div的margin参数？

在CSS中使用margin可以将margin-top、margin-bottom、margin-left、margin-right缩写为一个标记。margin标记可以带一个、二个、三个、四个参数，各有不同的含义。

示例代码：

<div style="border: 1px solid red;">
    <div style="border: 1px solid blue; margin: 20px;">
        margin: 20px; 上、下、左、右各20px。
    </div>
</div>
<div style="border: 1px solid red;">
    <div style="border: 1px solid blue; margin: 20px 40px;">
        margin: 20px 40px; 上、下20px；左、右40px。
    </div>
</div>
<div style="border: 1px solid red;">
    <div style="border: 1px solid blue; margin: 20px 40px 60px;">
        margin: 20px 40px 60px; 上20px；左、右40px；下60px。
    </div>
</div>
<div style="border: 1px solid red;">
    <div style="border: 1px solid blue; margin: 20px 40px 60px 80px;">
        <p style="text-align: center">
        </p>
    </div>
</div>
推荐文章