`
heichong
  • 浏览: 45768 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

如何用js给html表单设置style

HTMLCSSJavaScript 
阅读更多 
关键字: 用js给html表单设置style 
首先，把CSS和JS标签style属性对照表了解了：

CSS 和 JavaScript 标签 style 属性对照表：

 

盒子标签和属性对照 
CSS语法（不区分大小写）		JavaScript语法（区分大小写） 
border				border 
border-bottom			borderBottom 
border-bottom-color		borderBottomColor 
border-bottom-style		borderBottomStyle 
border-bottom-width		borderBottomWidth 
border-color			borderColor 
border-left			borderLeft 
border-left-color		borderLeftColor 
border-left-style		borderLeftStyle 
border-left-width		borderLeftWidth 
border-right			borderRight 
border-right-color		borderRightColor 
border-right-style		borderRightStyle 
border-right-width		borderRightWidth 
border-style			borderStyle 
border-top			borderTop 
border-top-color		borderTopColor 
border-top-style		borderTopStyle 
border-top-width		borderTopWidth 
border-width			borderWidth 
clear				clear 
float				floatStyle 
margin				margin 
margin-bottom			marginBottom 
margin-left			marginLeft 
margin-right			marginRight 
margin-top			marginTop 
padding				padding 
padding-bottom			paddingBottom 
padding-left			paddingLeft 
padding-right			paddingRight 
padding-top			paddingTop 

颜色和背景标签和属性对照	 
CSS 语法（不区分大小写）	 JavaScript 语法（区分大小写） 
background			background 
background-attachment		backgroundAttachment 
background-color		backgroundColor 
background-image		backgroundImage 
background-position		backgroundPosition 
background-repeat		backgroundRepeat 
color				color 
  
样式标签和属性对照 
CSS语法（不区分大小写）		JavaScript 语法（区分大小写） 
display				display 
list-style-type			listStyleType 
list-style-image		listStyleImage 
list-style-position		listStylePosition 
list-style			listStyle 
white-space			whiteSpace 
  
文字样式标签和属性对照 
CSS 语法（不区分大小写）	 JavaScript 语法（区分大小写） 
font				font 
font-family			fontFamily 
font-size			fontSize 
font-style			fontStyle 
font-variant			fontVariant 
font-weight			fontWeight 
  
文本标签和属性对照 
CSS 语法（不区分大小写）	 JavaScript 语法（区分大小写） 
letter-spacing			letterSpacing 
line-break			lineBreak 
line-height			lineHeight 
text-align			textAlign 
text-decoration			textDecoration 
text-indent			textIndent 
text-justify			textJustify 
text-transform			textTransform 
vertical-align			verticalAlign 
 



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>
<script language="javascript">
function validate(){
      if (document.all("name").value == ""){
			document.all("name").style["borderColor"]="red";//就是这里
			return;
		}
}
</script>
 <BODY>
  <input type="text" name="name" >
 </BODY>
</HTML>
分享到：
| Select列表框交换数据
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基于HTML/CSS/JS的酷炫登陆注册表单.zip

    1. **表单验证**：JS可以实时检查用户输入的数据，如邮箱格式、密码强度等，及时给出反馈，防止提交无效数据。 2. **交互效果**：当用户聚焦、失去焦点或点击元素时，可以使用JS改变元素样式，如高亮输入框或按钮。...

    清空表单标签js

    总结，清空表单标签的JavaScript方法主要涉及HTML表单元素、DOM操作以及事件监听。开发者可以根据需求选择使用内置的`reset()`方法，或者编写自定义的清空逻辑来实现更灵活的功能。同时，理解这些基础概念对于进行...

    metro ui style html JS

    综上所述，"metro ui style html JS"是一个关于使用HTML、CSS和JavaScript技术来构建具有Windows 8 Metro风格的现代、响应式网页和用户界面的过程。通过理解并应用这些技术，开发者能够创建出美观且功能强大的Web...

    js+html写的实现表格的动态增删改查和表单验证

    综上所述，使用JavaScript和HTML结合可以实现丰富的用户交互，创建动态表格并进行数据操作，同时配合表单验证保证数据质量。通过学习和掌握这些技能，开发者能够构建出高效、友好的前端应用。在实际项目中，还可能...

    JS动态表单

    1. **动态创建表单元素**：使用JavaScript，我们可以根据需求动态生成表单组件，例如`&lt;input&gt;`、`&lt;select&gt;`、`&lt;textarea&gt;`等。这通常涉及到`document.createElement()`方法，用于创建新的HTML元素，然后通过`...

    【前端】利用HTML标签 实现简单用户登录界面【HTML+CSS+JavaScript(JS)】

    本文将详细讲解如何使用HTML、CSS和JavaScript（JS）这三种核心技术来实现一个简单的用户登录界面。 首先，HTML（HyperText Markup Language）是网页的基础结构语言，用于定义页面的内容和布局。在实现登录界面时，...

    原生Javascript开发让你的表单亮起来

    原生JavaScript可以实现自定义的输入提示，比如使用`placeholder`属性设置占位符，或者使用`title`属性提供额外信息。此外，我们还可以通过CSS和JavaScript组合，创建更复杂的提示效果，如浮层提示、下拉选项等。 ...

    html表单css下载

    CSS（Cascading Style Sheets）则是用来控制网页样式和布局的技术，它可以美化HTML表单，使其更符合设计需求，提升用户体验。 在"html表单css下载"中，我们可以讨论以下几个关键知识点： 1. **HTML表单元素**：...

    JS点击展开登录注册表单.zip

    此外，为了增强用户体验，可以添加过渡动画效果，例如使用CSS3的`transition`属性来平滑地改变表单的显示状态。 最后，`dlzhi`可能代表的是一个JavaScript库或者自定义的函数集，用于扩展基本的JS功能，但具体实现...

    JS 超级强大的表单验证

    根据题目给出的部分内容，我们可以看到该表单验证脚本使用了HTML和CSS来定义表单元素及其样式，并通过JavaScript来实现验证逻辑。下面我们将详细分析这些知识点。 ##### 1. HTML结构 ```html (this, 2)"&gt; &lt;!-- ...

    纯js+css自定义form表单美化控件

    本资源“纯js+css自定义form表单美化控件”专注于提升用户注册界面的视觉体验，通过JavaScript（js）和层叠样式表（css）技术，将传统的表单元素如文本框、单选框和复选框进行个性化设计，从而提供更加吸引人的交互...

    6款漂亮HTML CSS样式用户留言表单的相关源码

    6. 验证提示：通过CSS和JavaScript进行表单验证，如必填项、邮箱格式、电话号码格式等，提供实时错误提示。 7. 响应式设计：适应不同设备的屏幕尺寸，确保在手机、平板电脑和桌面电脑上都能良好显示。 8. 自定义图标...

    前端学习 FreeCodeCamp html 注册表单

    在实际项目中，我们还需要考虑表单验证，即在客户端使用JavaScript进行数据验证，以确保用户输入的数据格式正确，避免无效或危险的数据提交到服务器。同时，对于更复杂的应用，可能还需要集成AJAX来实现无刷新的提交...

    动态控制js表单

    "动态控制JS表单"这个主题涉及到如何使用JavaScript来实现对HTML表单的实时交互和动态操作，使得用户界面更加灵活且具有更强的用户体验。 1. **动态创建表单元素** 在HTML文档中，静态地定义表单元素可能无法满足...

    HTML,JSP,JQ,JS冻结表单的表头和侧栏；

    标题"HTML, JSP, JQ, JS冻结表单的表头和侧栏"提及的技术点主要涉及到四个关键领域：HTML、JSP、jQuery（JQ）以及JavaScript（JS），下面将详细讲解如何在这些技术环境下实现这一功能。 1. **HTML**： HTML是网页的...

    js制作带有遮罩弹出层实现登录注册表单代码特效

    在本案例中，“js制作带有遮罩弹出层实现登录注册表单代码特效”涉及了几个关键知识点，包括JavaScript的基本操作、DOM操作、CSS样式以及用户交互设计。 首先，JavaScript在网页中的作用是为静态HTML添加动态功能。...

    韩顺平 html+css+javascript

    包括选择器的使用（如类选择器、ID选择器、元素选择器等），盒模型的理解（content、padding、border、margin），布局技术（如流式布局、网格布局、Flexbox弹性盒模型或CSS Grid布局），以及颜色、字体、背景、过渡...

    黑色注册登录表单HTML模板

    【HTML表单元素】 在HTML中，`&lt;form&gt;`标签用于创建表单，它可以包含各种输入控件，如文本输入框`&lt;input type="text"&gt;`，密码输入框`&lt;input type="password"&gt;`，以及提交按钮`&lt;input type="submit"&gt;`等。在这个模板...

    039 漂亮的登录界面 单页form表单【html登录注册页面代码】

    在本资源中，"039 漂亮的登录界面 单页form表单【html登录注册页面代码】" 提供了一个简单的HTML登录界面设计示例，它使用了单页（Single-Page Application, SPA）的概念，并结合了HTML、CSS技术来创建一个吸引人的...

Magicbox
Global site tag (gtag.js) - Google Analytics