代码如下：
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>仿css样式选择器</title>
    <style type="text/css">
        #textid{
            height: 100px;
            width: 300px;
           
        }
        #fontid{
            height: 20px;
            width: 300px;
           
        }
        #selid{
            width: 300px;
        }
    </style>
    <script type="text/javascript">
        function changeText(){
            /*拿到select的节点*/
            var selNode = document.getElementById("selid");
            /*将option中的值赋给textfont作为样式*/
            var textfont = selNode.options[selNode.selectedIndex].value;
            /*拿到欲变化的文本节点*/
            var textidNode = document.getElementById("textid");
            /*拿到底部的提示文本的节点*/
            var fontidNode = document.getElementById("fontid");
            var spanidNode = document.getElementById("sid");
            /*通过文本节点对象的style属性将样式赋给该文本*/
            textidNode.style.textTransform = textfont;
            /*在底部提示区域显示所选择的样式*/
            spanidNode.innerHTML = textfont;
        }
    </script>
</head>
<body>
    <div id="textid">
        Good Good Study,Day Day Up!
    </div>
    <p></p>
    <select id="selid" onchange="changeText()">
        <option value="none">----text-transform----</option>
        <option value="capitalize">首字母大写</option>
        <option value="uppercase">全部大写</option>
        <option value="lowercase">全部小写</option>
    </select>
    <p></p>
    <div id="fontid">文本格式：<span id="sid"></span></div>
</body>
</html>

JS实战 · 仿css样式选择器的更多相关文章

  1. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  2. CSS样式选择器

    <!-- css样式选择器 HTML选择器 类选择器 ID选择器 关联选择器 组合选择器 伪元素选择器 selector{ /* selector是样式选择器 property:value; / ...

  3. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  4. 前端基础：CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

  5. 用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）

    CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...

  6. js 设置 获取css样式

    先看一段代码,为了体现一会下面说的js用style获取css样式的不同 一:给div设置margin-left(用style设置css样式没什么问题) box.style.marginLeft=&qu ...

  7. Web前端新人之CSS样式选择器

    最近在学习css样式.那么我就想先整理一下css样式的选择器 规则结构: 每个规则都有两个基本部分:选择器和声明块.声明块由一个或者多个声明组成,每个声明则是一个属性—值对(property-valu ...

  8. 3.通过js代码设置css样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 5、通过js代码设置css样式

    1.页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

随机推荐

  1. asterisk 通话噪音,自动挂断,回声等情况

    打开配置文件:cd /etc/asterisk/ vim chan_dahdi.conf 1: busydetect:忙音检测,如果开启,Asterisk会拨号尝试或通话中分析在线的音频,从而尝试识别 ...

  2. swift - 字典和集合

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #4dbf56 } p.p2 { margin: 0.0px 0. ...

  3. HDU 4467 分块

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4467 题意:给定n个点m条边的无向图,点被染色(黑0/白1),边带边权.然后q个询问.询问分为两种: ...

  4. 搭建selenium grid简单配置

    1.使用selenium提供的服务端独立jar包 :服务端.客户端都是运行于java7环境. 2.启动hub: hub配置文件如下: Java -jar selenium-server-standal ...

  5. HttpClient发送Get和Post请求

    package JanGin.httpClient.demo; import java.io.IOException; import java.io.UnsupportedEncodingExcept ...

  6. Oldboy-Homework-Week1

    关于Python全栈开发第一周所讲的一些回忆(会陆续添加) 一.一些简单的命令.概念 1.print(""):输出 2.变量 3.input():输入 4.while循环.if.e ...

  7. [转]字符型IP地址转换成数字IP的SQL函数

    使用SQL函数可以实现许多的功能,下面为您介绍的是字符型IP地址转换成数字IP的SQL函数示例,供您参考,希望对您学习SQL函数能够有所帮助.      /**//*--调用示例       sele ...

  8. Django动态渲染多层菜单

    为后续给菜单设置权限管理方便,通过给页面模版菜单动态渲染,通过数据菜单表进行匹配需要渲染的菜单 #Django表结构 class Menus(models.Model): name = models. ...

  9. CSS列表逆序

    要使列表逆序的话,大多数人包括我一半都会选择在ol标签里使用reversed属性 <ol reversed> <li>first</li> <li>se ...

  10. Jenkins 集成打包和上传 App Store 的冲突

    周一下午用 Jenkins 集成打包,遇到了一个很奇怪的问题,之前上传到 APP Store 的时候 Build Settings->“Code Signing Resource Rules P ...