代码如下：
<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. Linux下安装Tomcat服务器和部署Web应用

    一.上传Tomcat服务器

  2. Mac 不能输入波浪线？

    当你发现你的Mac或者mbp不能输入波浪线 , 输出的都是的时候,检查一下这个选项(如下图所示)有没有选中. 如果没有,就勾上它!

  3. C# 向listbox添加大量数据项的实践心得

    使用 ListBox.Items.Add 方法添加项时,可以使用 BeginUpdate 方法,以防止每次向列表添加项时控件都重新绘制 ListBox.完成向列表添加项的任务后,调用 EndUpdat ...

  4. three.js贴图

    使用图像作为材质.这时候,就需要导入图像作为纹理贴图,并添加到相应的材质中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//E ...

  5. Mac使用总结

    显示隐藏文件 终端输入:defaults write com.apple.finder AppleShowAllFiles -bool true; KillAll Finder 添加SSHKey Ma ...

  6. Terminology: Sandbox

    In Comupter Secuity: from https://en.wikipedia.org/wiki/Sandbox_(computer_security) In computer secu ...

  7. 从零开始山寨Caffe·拾：IO系统(三)

    数据变形 IO(二)中,我们已经将原始数据缓冲至Datum,Datum又存入了生产者缓冲区,不过,这离消费,还早得很呢. 在消费(使用)之前,最重要的一步,就是数据变形. ImageNet Image ...

  8. 全本软件白名单 Quanben Software Whitelist

    Windows应用软件 Windows Applications (TBU) 全本推荐微软Windows 10操作系统 Quanben recommends Microsoft Windows 10 ...

  9. App Framework $.ui.loadContent 参数解释

    在使用 app Framework 的 $.ui.loadContent(target,newTab,goBack,transition);时 对 newTab goback两个参数一直不得其解.通过 ...

  10. 关于C#开发WEB项目TextBox控件的自适应高问题解决办法！

    前两天做WEB开发时候遇到了一个小问题TextBox 控件要根据输入的内容多少自动改变大小,并且这个大小要求是在本页面内最大化.也就是 Width="100%" Height=&q ...