如何用js给html表单设置style

最新推荐文章于 2021-06-07 09:11:58 发布
最新推荐文章于 2021-06-07 09:11:58 发布
阅读量283 收藏 1
点赞数
分类专栏： javascript 文章标签： HTML CSS JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_6507/article/details/81997031
版权 

关键字: 用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>
iteye_6507
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 样式之style属性的使用
weixin_34101229的博客
12-19 1万+
转自：https://www.ggbiji.com/html-style.html html中的style属性是用来改变html元素的样式的，样式是 在html 4 引入的，它是改变 html元素样式的一种方式。通过 html样式，能够通过使用 style 属性直接将样式添加到html元素，或者是间接地在CSS 文件中进行定义。 格式： &lt;标签 style=”属性值”&gt;&lt;/标签...
js简单获取表单中单选按钮值的方法
12-28
本文实例讲述了js简单获取表单中单选按钮值的方法。分享给大家供大家参考，具体如下： HTML部分如下： <form> bordercolor=#999999><span class=STYLE1>回退类型:</span></td> ...
用js给html表单设置style
rztyfx的专栏
07-02 4429
原贴地址:http://heichong.iteye.com/blog/860698关键字: 用js给html表单设置style 首先，把CSS和JS标签style属性对照表了解了： CSS 和 JavaScript 标签 style 属性对照表： 盒子标签和属性对照 CSS语法（不区分大小写） JavaScript语法（区分大小写） border bor
用js给html设置style
weixin_33681778的博客
02-27 607
1 [html] view plaincopyprint? 2 原贴地址:&lt;a href="http://heichong.iteye.com/blog/860698"&gt;http://heichong.iteye.com/blog/860698&lt;/a&gt; 3 [html] view plaincopyprint? 4 关键字: 用js给html表...
基于HTML实现表单提交后不刷新页面
09-28
1. 创建一个HTML表单，设置`target`属性为IFRAME的名称（例如`formsubmit`），这样表单提交时会将数据发送到IFRAME中处理，而不是刷新整个页面。 ```html <!-- 表单字段 --> ``` 2. 在页面中创建一个隐藏的IFRAME...
纸箱预订表单HTML模板
04-08
此外，模板可能还结合了JavaScript，实现动态交互功能，如验证用户输入、提交表单时的数据校验，甚至可能使用AJAX异步提交表单，提升用户体验。如果涉及到服务器端交互，可能还需要配合PHP、Node.js等后端语言处理...
form-js:带有JavaScript处理程序HTML登录表单
05-18
在传统的HTML表单中，提交表单会默认触发页面刷新。然而，通过添加JavaScript事件监听器，我们可以阻止这种默认行为，实现无刷新的表单提交。例如，可以使用`addEventListener`方法绑定`submit`事件到表单元素上，...
JS实现自适应高度表单文本框的方法
12-01
本文实例讲述了JS实现自适应高度表单文本框的方法。分享给大家供大家参考。具体实现方法如下： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
Simple-html-form-template:使用CSS和JavaScript创建HTML表单
05-16
- `script.js`: JavaScript脚本文件，处理表单交互和验证。 - 可能还会有其他示例文件或资源，如图片或字体文件。 总结，这个项目提供了使用HTML、CSS和JavaScript创建简单表单的实例，通过结合这三个核心技术，...
creative:使用HTMLCSS和JAVASCRIPT的基本注册表单网页
05-05
还可以设置`pattern`属性来限制输入格式，或者用`minlength`和`maxlength`限制字符数量。 【事件处理】 在JavaScript中，可以监听表单元素的事件，如`onsubmit`、`onchange`、`onclick`等。这些事件可以触发函数，...
metro ui style html JS
05-24
综上所述，"metro ui style html JS"是一个关于使用HTML、CSS和JavaScript技术来构建具有Windows 8 Metro风格的现代、响应式网页和用户界面的过程。通过理解并应用这些技术，开发者能够创建出美观且功能强大的Web...
基于HTML/CSS/JS的酷炫登陆注册表单.zip
03-07
1. **表单验证**：JS可以实时检查用户输入的数据，如邮箱格式、密码强度等，及时给出反馈，防止提交无效数据。 2. **交互效果**：当用户聚焦、失去焦点或点击元素时，可以使用JS改变元素样式，如高亮输入框或按钮。...
一个检测表单数据的JavaScript实例
12-02
一个检测表单数据的JavaScript实例，很简单，很实用，感兴趣的朋友可以看看 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> &...
用js给html添加样式
huangjinlong1024的博客
11-20 1946
一、原生js document.getElementById('id').style.color='#333'; 二、JQ $('#id').css('color','#333')
js修改html的样式
淡蓝海的博客
09-03 572
function Click(){ document.getElementById('button2').style.display='block';document.getElementById('button1').style.display='none'; } button1" value="点击" onclick="Click()"> button2" valu
JavaScript 操作表单
寇大大的博客
06-07 491
目录 JS操作表单 1.HTML表单 2、获取值 3、设置值 4、提交表单 JS操作表单 1.HTML表单 用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。 不过表单的输入框、下拉框等可以接收用户输入，所以用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。 HTML表单的输入控件主要有以下几种： 文本框，对应的<input type="text"> ，用于输入文本； 口令框，对应的<input .
2.1.8JS对表单元素进行设置
weixin_45823221的博客
12-10 168
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"src="index.js"></script> </head> <body onload="ymd()"> <form> <select name="yyyy" id="yyyy"></select>年.
用css html js写一个表单
最新发布
07-12
当然，以下是一个使用 HTML、CSS 和 JavaScript 编写的简单表单示例： ```html <!DOCTYPE html> <html> <head> <title>表单示例</title> <style> .container { width: 300px; margin: 0 auto; } .form-group { margin-bottom: 10px; } label { display: block; font-weight: bold; } input[type="text"], input[type="email"], textarea { width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 3px; } button { padding: 5px 10px; background-color: #4caf50; color: #fff; border: none; border-radius: 3px; cursor: pointer; } </style> </head> <body> <div class="container"> <h2>表单示例</h2> <form id="myForm"> <div class="form-group"> <label for="name">姓名:</label> <input type="text" id="name" name="name" required> </div> <div class="form-group"> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required> </div> <div class="form-group"> <label for="message">留言:</label> <textarea id="message" name="message" rows="4" required></textarea> </div> <button type="submit">提交</button> </form> </div> <script> document.getElementById("myForm").addEventListener("submit", function(event) { event.preventDefault(); // 阻止表单默认提交行为 // 获取表单数据 var name = document.getElementById("name").value; var email = document.getElementById("email").value; var message = document.getElementById("message").value; // 在控制台打印表单数据 console.log("姓名: " + name); console.log("邮箱: " + email); console.log("留言: " + message); // 清空表单 document.getElementById("myForm").reset(); }); </script> </body> </html> ``` 此示例中的表单包含姓名、邮箱和留言字段，并使用 JavaScript 监听表单的提交事件，阻止默认的提交行为，并将表单数据打印到浏览器的开发者工具控制台中。最后，通过 `reset()` 方法清空表单。您可以根据需要进行相应的修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值