代码如下：
<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. iOS10以上关于访问权限设置

    记录一下: iOS对用户的安全和隐私的增强,在申请很多私有权限的时候都需要添加描述,但是,在使用Xcode 8之前的Xcode还是使用系统的权限通知框.要想解决这个问题,只需要在info.plist添 ...

  2. 一、PID控制原理

    在模拟控制系统中,控制器最常用的控制规律是PID控制.模拟PID控制系统原理框图如下图.系统由模拟PID控制器和被控对象组成. PID控制器是一种线性控制器,它根据给定值Yd(t)与实际输出值Y(t) ...

  3. 深入理解JavaScript运行机制

    深入理解JavaScript运行机制 前言 本文是写作在给团队新人培训之际,所以其实本文的受众是对JavaScript的运行机制不了解或了解起来有困难的小伙伴.也就是说,其实真正的原理和本文阐述的并不 ...

  4. 在安装AndroidStudio时产生的问题

    JDK安装完毕,环境变量也配置完了,AndroidStudio安装完了,其中SDK使用了自己下载好的包. 但是第一次打开AndroidStudio的时候出现了错误: java.lang.Runtime ...

  5. JS typeof与instanceof的区别

    typeof 与 instanceof 通常是用来判断一个变量的类型,二者有如下区别: typeof: 判断一个变量的类型,返回值是字符串形式,返回结果有如下几种: number,boolean,st ...

  6. 线程的Alertable与User APC

    在使用插User APC注入DLL时,经常面临一个问题,那就是线程必须是处于Alertable模式才能注入成功.但一直对这个Alertable的含义不甚清楚,今天总算是把这个梗消化了. 微软对Aler ...

  7. 命令行操作svn和git和git

    前几天在写代码的时候电脑突然坏掉,老大交代的任务没完成,非常痛恨自己用svn或者git保存代码,相信很多程序员遇到过,硬盘坏掉,存在硬盘中的代码丢失,无法找回的问题,svn和git可谓程序员界的福音, ...

  8. webpack配置ES6 + react套装开发

    配置ES6 1.安装插件: babel-loader,babel-preset-es2015,babel-preset-react. 2.添加配置文件中部分内容: { test: /\.js$/, l ...

  9. apache rewrite_mod 经典疑问解答

    1.RewriteRule ^(com\/.*)$ index.php?do=$1 问:上面的规则匹配表达式 "^(.*)$" 匹配的内容是什么 答:匹配内容是URI站点目录:/d ...

  10. cocos2d中各种action方法的应用

    Action示例: 1.移动动作 cc.MoveBy:create(time, posX, posY)  在time时间内,相对当前位置基础上移动x,y个单位. cc.MoveTo:create(ti ...