• 技术文章 >web前端 >js教程

    javascript如何设置字体效果

    醉折花枝作酒筹醉折花枝作酒筹2021-06-10 10:12:14原创70

    在javascript中,可以使用style属性设置字体效果,语法格式“对象.style.属性=属性值”。Style对象代表一个单独的样式声明。可从应用样式的文档或元素访问Style对象。

    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    function over(obj){
    	obj.style.backgroundColor="blue";
    	obj.style.color="white";
    }
    function out(obj){
    	obj.style.backgroundColor="";
    	obj.style.color="";
    }
    function win(){
    	p1.style.fontWeight="Bold";//粗体
    	p2.style.fontStyle="Italic";//斜体
    	p3.style.textDecoration="underline";//下划线
    	p4.style.textDecoration="line-through";//删除线
    }
    function qs(){
    	p1.style.fontWeight="normal";
    	p2.style.fontStyle="normal";
    	p3.style.textDecoration="none";
    	p4.style.textDecoration="none";
    }
    </script>
    </head>
    <body οnlοad="win();">
    <table border="1" cellspacing="0" width="234" height="77">
    <tr align="center" id="t1" οnmοusemοve="over(this);" οnmοuseοut="out(this);">
    <td width="52"> </td>
    <td width="65">商品</td>
    <td width="95">价格(元)</td>
    </tr>
    <tr align="center" id="t2" οnmοusemοve="over(this);" οnmοuseοut="out(this);">
    <td>A 商场</td>
    <td>S 商品</td>
    <td>100</td>
    </tr>
    <tr align="center" id="t3" οnmοusemοve="over(this);" οnmοuseοut="out(this);">
    <td>B 商场</td>
    <td>S 商品</td>
    <td>80</td>
    </tr>
    </table>
    <p id="p1">阿帕奇</p>
    <p id="p2">阿帕奇</p>
    <p id="p3">阿帕奇</p>
    <p id="p4">阿帕奇</p>
    <p id="p5" οnmοusemοve="qs();">鼠标移到此处撤销 阿帕奇样式</p>
    <p id="p6">阿帕奇</p>
    </body>
    </html>

    在很多情况下,都需要对网页上元素的样式进行动态的修改。在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用、效果、以及缺陷。

    1、使用obj.className来修改样式表的类名。

    2、使用obj.style.cssTest来修改嵌入式的css。

    3、使用obj.className来修改样式表的类名。

    4、使用更改外联的css文件,从而改变元素的css

    【推荐学习:javascript高级教程

    以上就是javascript如何设置字体效果的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:js设置字体样式
    上一篇:javascript的基本特点有哪些 下一篇:浅谈使用Node.js搭建一个简单的 HTTP 服务器
    第16期线上培训班

    相关文章推荐

    • 深入了解vue.js的3种安装方法• 深入了解Nodejs中的mongoose工具• 深入浅析Node.js中的异步• 一分钟解读js与PHP 设置cookie的相互读取(附代码)• jsp和html的区别有哪些

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网