DOM设置css样式

CaiKanXP 2019-12-14 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM设置css样式</title>
    <!-- 
        p.style.fontSize=100px;
        解读：
        设置元素p的样式字体大小=100px;
        样式属性不能有“-”符号，要写出驼峰形式

        切记，除了getElementById获取到的元素，其他都要通过数组x[i]的索引来对其设置样式，不论获取到的有几个
     -->
</head>
<body>
    <h3 id="h">前端书籍</h3>
    <ul id="listWeb">
        <li>html基础</li>
        <li>CSS基础</li>
        <li>JavaScript基础</li>
        <li>Jquery框架</li>
        <li>bootStrap框架</li>
    </ul>
    <h3>JAVA书籍</h3>
    <ul id="listJava">
        <li>JAVA语言基础</li>
        <li>三大框架</li>
        <li>JAVA深入浅出</li>
    </ul>
<script>
    var x=document.getElementById("h");//使用变量x获取id=h的h3
    x.style.color="blue";//id方法获取的是唯一的，无需使用数组索引
    var y=document.getElementsByTagName("h3");//使用变量y获取h3元素
    y[1].style.color="red";//数组索引第二个h3并设置样式
    var a=document.getElementById("listWeb").getElementsByTagName("li");//使用变量a获取所有前端书籍
    for (var i=0;i<=a.length;i++){//使用循环遍历所有前端书籍
        a[i].style.fontStyle="italic";//将所有前端书籍设置斜体
        if (i==2){
            a[i].style.color="green";//将第二个设置字体颜色为绿色
            a[i].style.listStyle="none";//将第二个前面的黑点删除
        }else{
            a[i].style.backgroundColor="grey";//将其他的设置背景颜色为灰色
        }
    }
</script>
</body>
</html>
CaiKanXP

CaiKanXP

相关推荐

一个思路，如何尝试创建自己的CSS框架？

在2019年，我创建了一个CSS框架并将其命名为Rotala.css[1]。经过一些重构和修改，我终于在2020年发布了“玩具”框架。但它仍在原型设计中，因为我认为我的解决方案还不优雅。我构建此框架的原因很简单：我自己想要一个CSS框架。最初，我开始使用

ThikHome / 0评论 2020-08-24

CSS之Sass入门

大家都知道，js 中可以自定义发量，css 仅仅是一个标记语言，不是编程语言，因此不可以自定义发量、不可以引用等等。一种帮助你简化 CSS 工作流程的方式，帮助你更容易维护和开发 CSS 内容。Sass 是这个世界上最成熟、稳定和强大的专业级 CSS 扩展

teresalxm / 0评论 2020-06-05

CSS代码检查工具stylelint的使用方法详解

CSS不能算是严格意义的编程语言，但是在前端体系中却不能小觑。CSS 是以描述为主的样式表，如果描述得混乱、没有规则，对于其他开发者一定是一个定时炸弹，特别是有强迫症的人群。CSS 看似简单，想要写出漂亮的 CSS 还是相当困难。所以校验 CSS 规则的行

昔人已老 / 0评论 2020-02-04

前端2（form表单、css）

<tr> 一个tr就表示一行。<td colspan="2">egon</td> 水平方向占多行。# 原生的表格标签很丑 我们要使用框架封装好的 很好看。能够获取前端用户数据基于网络发送给后端服

nicepainkiller / 0评论 2020-05-12

React拾遗：从10种现在流行的 CSS 解决方案谈谈我的最爱 （中）

最近写React一直在纠结样式的问题，今天找了篇看起来很不错的文章，认真读三遍先...上篇 介绍了 React 现在流行的 CSS 解决方案。本篇就直接进入主题详细讲讲我最喜欢的解决方式之一：tachyons. 是否解决了React开发的痛点：局部css，

尚衍亮 / 0评论 2020-05-12

Flask 使用CSS框架

一个Web项目不仅需要HTML模板，还需要许多静态文件，比如CSS、JavaScript文件、图片和声音声。在flask程序中，默认需要将静态文件存储在与主脚本同级目录的static文件夹中。flask内置了用于获取静态文件的视图函数，端点值为static

waterv / 0评论 2020-04-26

前端架构演进及主流UI

前端演进到现在，各种技术框架已经层出不穷了，作为一名开发少不了要干一些前端的活儿，那么整个前端的架构体系是怎样的呢？让我们一起来了解回顾一下。HTML(结构):超文本标记语言，决定网页的结构和内容。JavaScript(行为):是一种弱类型脚本语言，其源代

coulder / 0评论 2020-04-21

十五种加速设计开发的CSS框架

如今我们所浏览的网站，除了基本的信息展示之外，大多数具有生动的动画、多样的布局、以及诱人的互动元素，多要归功于CSS创新技术的实现。通常，业界将CSS定义为一种提供有效外观的设计语言。它可以被用于格式化和描述以文档标记形式编写的外观。由于CSS可以与XUL

aSuncat / 0评论 2020-03-20

HTML + CSS + JavaScript 实现注册页面信息验证（表单验证）

创建一个注册页面，如下图。然后再对注册信息进行判断，判断其是否符合要求。我们可以使用三个块标签，可以将这三个部分分别放到每个块标签中。<td class="td_right"><input type="tex

somboy / 0评论 2020-03-03

10个顶级的CSS3代码生成器

10个顶级的CSS3代码生成器新出来的在线工具和 web 应用允许开发人员快速创建网站，而无需手动一行一行地编写代码。当前，不断有新的框架和代码库涌现在前端开发这个领域里。但是，这也让许多开发人员忘记了代码生成器以及它们在构建网站时的作用。以下资源是完全免

tianzyc / 0评论 2020-03-01

Web前端开发需要学什么语言？

前端框架一般指用于简化网页设计的框架，比如，jquery，extjs，bootstrap等等，这些框架封装了一些功能，比如html文档操作，漂亮的各种控件。Web前端开发主要学习html、css、js、jquery等等，除了学习开发语言，还要为网站上提供的

haohong / 0评论 2020-02-26

没你想象的那么难！深度剖析三款最实用的css预处理器

css预处理器种类繁多，本次小渡就以Sass、Less、Stylus进行比较。Sass能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。Less优缺点1.作为目前最流行的css预处理器之一的less，可谓是Sass最强劲的对手，诞生

nicepainkiller / 0评论 2020-02-23

拿到十份互联网公司Offer，他是怎样学好web前端开发的？

Web前端工程师是近几年的新兴职业，也是目前火爆而且高薪的职业。不同的公司也有不同的叫法，比如：网页界面开发，网站设计等，要学好web前端开发，需要掌握什么方法与技巧？这个是最简单的，也是最基础的。为什么会说css+div呢?因为我上面说了div就是 ht

haohong / 0评论 2020-02-14

10 分钟，带你快速入门前端三大技术（HTML、CSS、JavaScript)

听到前端技术，不少朋友一定会感到有些陌生。但其实，前端，你每天都在接触。你正在使用的APP，你正在浏览的网页，这些你能看到的界面，都属于前端。而前端最重要的三大技术，HTML，CSS，JavaScript，则是每一个前端开发者必须具备的技能。以下内容节选自

WinerChopin / 0评论 2020-02-13

HTML,CSS,JavaScript,AJAX,JSP,Servlet,JDBC,Structs,Spring,Hibernate,Xml等概念

Java Web开发中经常用XML来存储Web应用的配置信息

impress / 0评论 2020-01-01

css属性position

CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从

dazhifu / 0评论 2020-01-02

CSS知识点复习

实现表现和内容相分离。如果一个网站页面很多，每一个文件都会变大，重用性差，后期维护难度不小，如果文件很少，CSS代码也不多，这种方式还是很不错的。

MaureenChen / 0评论 2019-12-27

总结下html、css的一些东西

CSS，JS各有哪些流行的库？组件是组成页面中最基本的元素，按钮，输入框，下拉选择都是组件，组件和组件组合就变成了一个更复杂的组件。库的典型功能包括处理字符串，日期，HTML DOM元素，事件，Cookie，动画，网络请求等。通常框架提供事件。存储和数据绑

bowean / 0评论 2019-12-27

前端如何入门面对传统的html，css，js，三大框架react，vue，angular？

并且Jquery这种插件也基本被废弃，nginx，linux相关知识。看看这些公司招聘需求，

wwwxuewen / 0评论 2019-12-25

css 网格布局

网格布局是最强大的 CSS 布局方案。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元

云端漂移 / 0评论 2019-12-21

css的响应式布局和动画

响应式布局==曾经==非常的流行，这种布局方式可以做出一也兼容一切设备的页面，但是当页面的功能越来越多，css文件越来越大，兼容难度越来越大，js也会很难写，于是他们离开了历史的舞台，如今流行的还是手机端一份，pc端一份，pc用css适配实现，但是pc的屏

MaureenChen / 0评论 2019-12-13

前端基础框架-css

<div style="background-color: red;height: 100px;width: 100px">背景色</div>第二种方法是在head里面写需要和body里面创建关系。--#代表调用

somboy / 0评论 2019-12-12

iText + Freemarker实现pdf的导出，支持中文、css以及图片，页眉页脚，页眉添加图片

　　原来是决定采用wkhtmlToPdf将html页面转换为pdf，而且html样式保存的还挺好，但是最后尝试下来发现，他转换不了我们框架中的html页面，将框架中的html页面地址进行转换总是会转换成首页的图片，多次查询无果，最终放弃了，改换成itext

somboy / 0评论 2019-12-07

IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

标准的网页都需要对内容进行布局，以前都是采用表格的定位技术，从2005年开始逐步转向DIV+CSS的布局方式，目前绝大多数的网站都是采用这种布局方式。使用DIV+CSS对网站进行布局符合W3C标准，采用这种方式布局通常是为了说明与HTML表格定位方式的区别

sdbxpjzq / 0评论 2019-12-06

10个有趣的javascript和css库（2019年最新）

我们的使命是让您了解最新和最酷的Web开发趋势。这就是为什么我们每个月都会发布一些精选的资源，这些资源是我们偶然发现并认为值得您关注的。强大的开源框架，用于开发复杂的定制分析系统。由前端sdk和一个后端API组成，该后端与大多数数据库可以一起工作。包括明暗

SuiKaSan的自学室 / 0评论 2019-11-19

基于 CSS 的 Web 框架 CJSS

CJSS 是一个基于 CSS 的 Web 框架，所有效果都在 CSS 文件中生效，可以在 CSS 中使用它添加更多功能，或者构建一个完整的页面。想要使用某个组件，在 CSS 文件中选择它，然后添加 --html:；如果想使用 JavaScript 从 HT

sdbxpjzq / 0评论 2019-11-11

CSS 浏览器样式重置终结版

浏览器的一些默认样式，有时候真的是特别丑； 虽然现在有现成的 UI 框架，但有时候写个小东西不想用那么庞大的 UI 框架,这篇文章介绍解决一些样式问题，最后将给出完整的重置样式表; 如果有遇到其它样式问题，评论区提建议，我将持续更新。浏览器默认在 bod

liboqiao / 0评论 2019-11-04

CSS 自定义属性 - 入门

CSS语言是一种声明式语言，不像其他语言有变量、条件和逻辑等特性，因为这个原因，社区中有了各种CSS处理器语言，比如Sass、LESS和Stylus等。虽然CSS处理器给编写和维护CSS带来了一些便利，但是需要额外的编译，所以社区开始将CSS处理器中的变量

yezi / 0评论 2019-11-04

web网页简单设计补充的css知识点

了解了web的基本框架，html和css，补充几点知识点常见表示颜色的几种方法：red#f00rgb(255,0,0)rgba(255,0,0,0.5) 带透明度的色彩值 opacity: 50%;透明度border-radius:圆角 border-r

sdbxpjzq / 0评论 2019-10-31

web前端开发初级

HTML 的相关基本定义。HTML 的全局事件属性。CSS 样式的基本使用。派生选择器/上下文选择器。for in 遍历对象或数组。获取/设置元素的属性值。创建节点及增添节点。获取鼠标点击位置。若本号内容有做得不到位的地方，请及时联系我们进行整改即可，会在

jiedinghui / 0评论 2019-10-24

高质量的css代码-如何组织css

对于第一点,只有对错没有好坏之分,对于第二点是只有好坏之分没有对错.css框架按功能分可以:控制字体的可以放在font.css文件里,控制颜色的可以放在color.css文件里.推荐一种个人认为比较好的css组织方法:base.css+common.css

ozhanjun / 0评论 2015-03-16

13个帮你提高开发效率的现代CSS框架

本文将向你介绍一系列***CSS框架。有些人可能听说过，也可能对有些人是全新的。但它们都提供了各种有用的先进功能，可以改善你的工作流程。让我们先从一些专注于 CSS 的框架开始。你将找到所有类型的布局和UI元素来自己构建项目的基础。相反，它更专注于程序本身

葉無聞 / 0评论 2019-05-13

Pure : 来自雅虎的纯 CSS 框架

Pure也是一款很出色的CSS框架，之前分享的Bootstrap是由Twitter出品的，而Pure是来自雅虎的。尽管从UI界面效果上来说，Pure没有Bootstrap那样精美，但Pure是纯CSS实现的，因此非常小巧，整个框架压缩后只有5.7k左右。最

六月的兔子 / 0评论 2015-06-03

设置IE文本模式,兼容css

chrome=1，是Google Chrome Frame，如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以

阴慧超 / 0评论 2015-10-27

表单输入框焦点高光css代码

随着HTML 5 + CSS 3的普及，我们使用CSS代码实现的页面效果越来越华丽，而表单输入框获得焦点时的高光效果更是许多HTML 5站点所必备的表单必杀技。尤其是Twitter公司推出Bootstrap框架以后，表单高光效果几乎成为Bootstrape

css教程 / 0评论 2017-12-19

京东商城前端面试小心得．

昨天去京东面试了一下前端．可惜没有面试成功．回来根据回忆把这次失败的经历记录下来，来让自己静下心．也可以成为别人的面试参考．。其实面试的时候的提问无非就是一些基本的html知识，和css的一些知识，然后就是js的一些基本点，和难点．

不良牛 / 0评论 2017-09-27

15款不容错过的前端开发Javascript和css类库 - 2017版本~

前端的JS和CSS类库日新月异， 在今天这篇介绍中，我们将精挑细选15款超棒的JS/CSS类库， 希望大家在开发过程中会觉得有帮助~这有几种不同的版本帮助你快速的整合最流行的框架，比如， AngularJS， React.jS，Vue.jS等等。来自Uns

yyNet0 / 0评论 2017-09-05

Vue 框架之动态绑定 css 样式实例分析

首先说一下 动态绑定，相对的大家都知道静态绑定，静态绑定的话，直接加 class=“”就可以了，使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ，也可以实现绑定，但都不是动态绑定，动态

mfkpum / 0评论 2018-11-14

眼下最流行的五大CSS框架，你都知道么？

如今，CSS框架越来越受欢迎，可以说已经应用到每一个网站上了。作为开发工具，CSS框架一直处于不断进化和改进的状态，因此我们强烈建议您关注眼下的趋势。这篇文章会带您了解2017年最流行的5种CSS框架。这个框架是GitHub的明星产品之一，被认为是拥有最好

yongquanx / 0评论 2017-11-01

应用现代CSS创建React App项目

官方公众号 | 愿码 | 愿码服务号 | 区块链部落免费加入愿码全思维工程师社群 | 任一公众号回复“愿码”两个字获取入群二维码本文阅读时长：13min. Create React App上下文中的预处理器基本上是构建过程中的一个步骤。介绍CSS模块CSS

沉着前进 / 0评论 2019-07-01

前端练级攻略(第一部分)

我记得我刚开始学习前端开发的时候。我看到了很多文章及资料，被学习的资料压得喘不过气来，甚至不知道从哪里开始。本指南列出前端学习路线，并提供了平时收藏的一些有效的资源。第一部分介绍了如何使用 HTML 和 CSS开发接口。第2部分将介绍 Javascript

LONGSHAN / 0评论 2019-07-01

CSS的工作过程

在平时的工作中，可能都是再用一些框架或者是简单的CSS来修饰我们的HTML页面，那么仔细想想一个资深的前端从业者，是否需要知道他的工作原理和过程呢，技术这种东西，当然是我们了解的越多，才会使用的越得心应手。那么下面，我就为大家来介绍一下CSS的工作过程把。

impress / 0评论 2019-07-01

好程序员HTML5培训教程-html和css基础知识

显示为>right显示为三.一个简单的html框架<!<h1>演示文件，页面显示hello world！

WebVincent / 0评论 2019-07-01

Web 性能优化：21种优化CSS和加快网站速度的方法

Web 性能优化：使用 Webpack 分离数据的正确方法Web 性能优化：图片优化让网站大小减少 62%Web 性能优化：缓存 React 事件来提高性能CSS 必须通过一个相对复杂的管道，就像 HTML 和 JavaScript一样，浏览器必须从服务器

LadyZhong / 0评论 2019-07-01

响应式网页布局 - W3Schools How-Tos 01

W3Schools教学系列W3Schools是知名的网页设计／前端开发教学网站，不仅提供HTML、CSS、JavaScript等的详尽教学，还可以把它当作说明文件。有经验的前端或多或少已经接触过这个网站，因为它经常出现在搜索结果的前几项。其中，它的How

武林半侠 / 0评论 2019-07-01

大话css预编译处理（一）通读介绍篇

CSS 预编译处理，从字面上理解，就是预先编译处理CSS。它扩展了 CSS 语言，增加了变量、Mixin、函数等编程的特性，使 CSS 更易维护和扩展。CSS预编译的工作原理是提供便捷的语法和特性供开发者编写源代码，随后经过专门的编译工具将源码转化为CSS

dangzhangjing / 0评论 2019-06-30

创建自己的 CSS 网格系统【转载 | 译】

此文翻译自 Creating Your Own CSS Grid System | Jan，英文不好如有错误 ，请指正。CSS 网格已经存在很长时间了。它们通常捆绑在 Bootstrap 等框架中。我不是一个 Bootstrap 仇恨者，但如果你真正需要

云端漂移 / 0评论 2019-06-30

第三方CSS安全吗？

有些人要求浏览器“修复”它。另有一些人挖掘得更深一些，发现它只影响使用React及类似框架编写的网站，并为此指责React。不过真正的问题在于第三方内容是不是“安全的”。同时他们也有可能会用一些不恰当的内容取代原来的图片。不过图像的影响仅限于元素本身的内容

Phoebe的学习天地 / 0评论 2019-06-30

Bootstrap

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师MarkOtto和JacobThornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0。Bootstrap是最受欢迎的HTM

bingkingboy / 0评论 2016-03-24