代码如下：
<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. ListView中的setOnScrollListener

    ListView是Android中最常用的控件之一,随着时代发展,RecyclerView有取代它的趋势,但是在一些老代码中,ListView依然扮演着重要的作用.项目中遇到一个需求,需要监听List ...

  2. OpenGL帧缓存对象(FBO：Frame Buffer Object)(转载)

    原文地址http://www.songho.ca/opengl/gl_fbo.html 但有改动. OpenGL Frame BufferObject(FBO) Overview: 在OpenGL渲染 ...

  3. ExecutorService中submit()和execute()的区别

    在使用java.util.concurrent下关于线程池一些类的时候,相信很多人和我一样,总是分不清submit()和execute()的区别,今天从源码方面分析总结一下. 通常,我们通过Execu ...

  4. delphi 步长不等于 1 的方法

    i:=; do begin ... INC(i,); end; 不能用for循环,只能用像上面的方法折衷一下

  5. servlet jsp jdbc bootstrarp mvc分层模式实现的第一个项目

    登录注册界面 这是一个注册和登录的界面 用到了前端页面中自带的一点H5的标签和属性---巩固下 邮箱格式 :type="email"  不能为空:  required=" ...

  6. jQuery.zTree的跳坑记录

    最近项目用到树型结构的交互,一开始并不打算选择zTree,为了项目进度我妥协了,这一妥协后果就是我进坑了,在2天的挣扎中,我终于跳出坑了,活了下来,有一些感慨纪录下来. 有一个业务场景需要2个树型结构 ...

  7. 配置gradle.properties

    在一些项目中会分拆app 和 lib , 这时候引用support的时候,一旦更改版本会出现需要同步更改两个地方的问题.这种情况,可以通过配置gradle.properties实现替换. 在项目编译过 ...

  8. Powershell脚本执行权限

    Powershell脚本需要使用PS1扩展名 在加载脚本前需要确认是都有执行权限,默认是Restricted(受限的), 可以执行Get-ExecutionPolicy查看权限, 一般情况下使用 Re ...

  9. 忽略this的后果

    昨天在做一个简单的遮罩功能,说简单不如说是繁琐的好,主要是因为一个页面中有将近十几个,只不过是功能是一样的,要将一段文字遮盖住,文字的内容是不确定的,也就是跟着内容的高度变化而改变遮罩层的高度.了解了 ...

  10. Unity Android加密DLL笔记

    unity mono 地址:https://github.com/Unity-Technologies/mono 下载与unity版本对应的unity mono. brew安装:http://brew ...