<div style="padding:5px 0px;"> 本人计划自 <input datafld="qxlj_kssj" datasrc="#bind_70" id="kssj" mindex="20" name="kssj" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly" style="border-bottom: 1px solid; width: 130px; color: rgb(0, 0, 0); padding-left: 10px;" type="text" /> 至<input datafld="qxlj_jssj" datasrc="#bind_70" id="jssj" mindex="21" name="jssj" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly" style="border-bottom: 1px solid; width: 130px; color: rgb(0, 0, 0); padding-left: 10px;" type="text" /> （休假<input class="input6" datafld="qxlj_qjts" datasrc="#bind_70" id="qjts" mindex="24" name="qjts" style="width: 40px; padding-left: 10px;" type="text" readonly="readonly"/> 天，其中工作日<input class="input6" datafld="qxlj_qjgzrs" datasrc="#bind_70" id="qjgzrs" mindex="25" name="qjgzrs" style="width: 40px; padding-left: 10px;" type="text" readonly="readonly"/> 天，节假日、公休日<input class="input6" datafld="qxlj_gxrs" datasrc="#bind_70" id="gxrs" mindex="26" name="gxrs" style="width: 40px; padding-left: 10px;" type="text" readonly="readonly"/> 天） </div>根据以上代码当点击完kssj和jssj的input后自动计算休假天数并赋值给qjts

时间: 2023-08-14 17:07:00 浏览: 124

Js+Div属性大全

### Js+Div属性大全知识点详解 #### 一、概述在Web开发中，JavaScript与HTML的结合使用极为广泛，特别是JavaScript对DOM（Document Object Model）的操作能力，使得开发者能够更加灵活地控制页面元素的行为和样式。本文档将详细介绍一系列与`<div>`元素相关的JavaScript属性，这些属性对于实现动态网页效果至关重要。 #### 二、属性详解 1. **accessKey**: 设置或获取对象的快捷键，通常用于快速聚焦到某个元素。 - 示例：`document.getElementById('myDiv').accessKey = 'a';` 2. **align**: 设置或获取对象相对于显示或表格的排列方式。 - 取值包括`left`, `right`, `center`等。 - 示例：`document.getElementById('myDiv').align = 'center';` 3. **atomicselection**: 指定元素及其内容是否可以作为一个不可见单位进行统一的选择。 - 这个属性主要用于富文本编辑器等场景。 4. **begin**: 设置或获取时间线在该元素上播放前的延迟时间。这个属性通常用于`<time>`元素。 - 示例：`document.getElementById('myTime').begin = 5;` 5. **blockDirection**: 获取表明块元素内容的绕排方向的值，是由左至右，还是由右至左。 - 示例：`document.getElementById('myDiv').blockDirection;` 6. **canHaveChildren**: 获取表明对象是否可以包含子对象的值。 - 示例：`document.getElementById('myDiv').canHaveChildren;` 7. **canHaveHTML**: 获取表明对象是否可以包含丰富的HTML标签的值。 - 示例：`document.getElementById('myDiv').canHaveHTML;` 8. **className**: 设置或获取对象的类名。 - 示例：`document.getElementById('myDiv').className = 'newClass';` 9. **clientHeight**: 获取对象的高度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。 - 示例：`document.getElementById('myDiv').clientHeight;` 10. **clientLeft**: 获取offsetLeft属性和客户区域的实际左边之间的距离。 - 示例：`document.getElementById('myDiv').clientLeft;` 11. **clientTop**: 获取offsetTop属性和客户区域的实际顶端之间的距离。 - 示例：`document.getElementById('myDiv').clientTop;` 12. **clientWidth**: 获取对象的宽度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。 - 示例：`document.getElementById('myDiv').clientWidth;` 13. **contentEditable**: 设置或获取表明用户是否可编辑对象内容的字符串。 - 取值包括`true`, `false`。 - 示例：`document.getElementById('myDiv').contentEditable = 'true';` 14. **dataFld**: 设置或获取由dataSrc属性指定的绑定到指定对象的给定数据源的字段。 - 示例：`document.getElementById('myDiv').dataFld = 'title';` 15. **dataFormatAs**: 设置或获取如何渲染提供给对象的数据。 - 示例：`document.getElementById('myDiv').dataFormatAs = 'html';` 16. **dataSrc**: 设置或获取用于数据绑定的数据源。 - 示例：`document.getElementById('myDiv').dataSrc = 'dataSource';` 17. **dir**: 设置或获取对象的阅读顺序。 - 取值包括`ltr`(从左至右)和`rtl`(从右至左)。 - 示例：`document.getElementById('myDiv').dir = 'ltr';` 18. **disabled**: 获取表明用户是否可与该对象交互的值。 - 示例：`document.getElementById('myDiv').disabled;` 19. **end**: 设置或获取表明元素结束时间的值，或者元素设置为重复的简单持续终止时间。 - 示例：`document.getElementById('myTime').end = 10;` 20. **firstChild**: 获取对象的childNodes集合的第一个子对象的引用。 - 示例：`document.getElementById('myDiv').firstChild;` 21. **hasMedia**: 获取一个表明元素是否为HTML+TIME媒体元素的Boolean值。 - 示例：`document.getElementById('myTime').hasMedia;` 22. **hideFocus**: 设置或获取表明对象是否显式标明焦点的值。 - 示例：`document.getElementById('myDiv').hideFocus = true;` 23. **id**: 获取标识对象的字符串。 - 示例：`document.getElementById('myDiv').id;` 24. **innerHTML**: 设置或获取位于对象起始和结束标签内的HTML。 - 示例：`document.getElementById('myDiv').innerHTML = '<p>Hello World</p>';` 25. **innerText**: 设置或获取位于对象起始和结束标签内的文本。 - 示例：`document.getElementById('myDiv').innerText = 'Hello World';` 26. **isContentEditable**: 获取表明用户是否可编辑对象内容的值。 - 示例：`document.getElementById('myDiv').isContentEditable;` 27. **isDisabled**: 获取表明用户是否可与该对象交互的值。 - 示例：`document.getElementById('myDiv').isDisabled;` 28. **isMultiLine**: 获取表明对象的内容是包含一行还是多行的值。 - 示例：`document.getElementById('myDiv').isMultiLine;` 29. **isTextEdit**: 获取是否可使用该对象创建一个TextRange对象。 - 示例：`document.getElementById('myDiv').isTextEdit;` 30. **lang**: 设置或获取要使用的语言。 - 示例：`document.getElementById('myDiv').lang = 'zh-CN';` 31. **language**: 设置或获取当前脚本编写用的语言。 - 示例：`document.getElementById('myScript').language = 'javascript';` 32. **lastChild**: 获取该对象childNodes集合中最后一个子对象的引用。 - 示例：`document.getElementById('myDiv').lastChild;` 33. **nextSibling**: 获取对此对象的下一个兄弟对象的引用。 - 示例：`document.getElementById('myDiv').nextSibling;` 34. **nodeName**: 获取特定结点类型的名称。 - 示例：`document.getElementById('myDiv').nodeName;` 35. **nodeType**: 获取所需结点的类型。 - 示例：`document.getElementById('myDiv').nodeType;` 36. **nodeValue**: 设置或获取结点的值。 - 示例：`document.getElementById('myDiv').nodeValue = 'New value';` 37. **noWrap**: 设置或获取浏览器是否自动执行换行。 - 示例：`document.getElementById('myDiv').noWrap = false;` 38. **offsetHeight**: 获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的高度。 - 示例：`document.getElementById('myDiv').offsetHeight;` 39. **offsetLeft**: 获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置。 - 示例：`document.getElementById('myDiv').offsetLeft;` 40. **offsetParent**: 获取定义对象offsetTop和offsetLeft属性的容器对象的引用。 - 示例：`document.getElementById('myDiv').offsetParent;` 41. **offsetTop**: 获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置。 - 示例：`document.getElementById('myDiv').offsetTop;` 42. **offsetWidth**: 获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的宽度。 - 示例：`document.getElementById('myDiv').offsetWidth;` 43. **onOffBehavior**: 获取表明指定的Microsoft®DirectAnimation®行为是否正在运行的对象。 - 示例：`document.getElementById('myDiv').onOffBehavior;` 44. **outerHTML**: 设置或获取对象及其内容的HTML形式。 - 示例：`document.getElementById('myDiv').outerHTML = '<div id="newDiv">New content</div>';` 45. **outerText**: 设置或获取对象的文本。 - 示例：`document.getElementById('myDiv').outerText = 'New text';` 46. **ownerDocument**: 设置或获取结点关联的document对象。 - 示例：`document.getElementById('myDiv').ownerDocument;` 47. **parentElement**: 获取对象层次中的父对象。 - 示例：`document.getElementById('myDiv').parentElement;` 48. **parentNode**: 获取文档层次中的父对象。 - 示例：`document.getElementById('myDiv').parentNode;` 49. **parentTextEdit**: 获取文档层次中可用于创建包含原始对象的TextRange的容器对象。 - 示例：`document.getElementById('myDiv').parentTextEdit;` 50. **previousSibling**: 获取对此对象的上一个兄弟对象的引用。 - 示例：`document.getElementById('myDiv').previousSibling;` 51. **readyState**: 获取对象的当前状态。 - 示例：`document.getElementById('myDiv').readyState;` 52. **recordNumber**: 获取数据集中生成对象的原始记录。 - 示例：`document.getElementById('myDiv').recordNumber;` 53. **scopeName**: 获取为该元素定义的命名空间。 - 示例：`document.getElementById('myDiv').scopeName;` 54. **scrollHeight**: 获取对象的滚动高度。 - 示例：`document.getElementById('myDiv').scrollHeight;` 55. **scrollLeft**: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。 - 示例：`document.getElementById('myDiv').scrollLeft = 50;` 56. **scrollTop**: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。 - 示例：`document.getElementById('myDiv').scrollTop = 50;` 57. **scrollWidth**: 获取对象的滚动宽度。 - 示例：`document.getElementById('myDiv').scrollWidth;` 58. **sourceIndex**: 获取对象在源序中的依次位置，即对象出现在document的all集合中的顺序。 - 示例：`document.getElementById('myDiv').sourceIndex;` 59. **style**: 为该设置元素设置内嵌样式。 - 示例：`document.getElementById('myDiv').style.backgroundColor = 'red';` #### 三、总结以上列举了大量与`<div>`元素相关的JavaScript属性，这些属性涵盖了布局、样式、数据绑定等多个方面，对于提升网页的用户体验和功能性具有重要意义。熟练掌握并合理运用这些属性，能够帮助开发者更好地控制页面元素，实现更复杂的Web应用程序。

根据你提供的代码，当点击完 "kssj" 和 "jssj" 的输入框后，你想要自动计算休假天数并将结果赋值给 "qjts" 输入框。我将为你提供一段 JavaScript 代码，用于实现这个功能： ```javascript // 获取 "kssj" 和 "jssj" 输入框元素 var kssjInput = document.getElementById("kssj"); var jssjInput = document.getElementById("jssj"); // 监听 "kssj" 和 "jssj" 输入框的点击事件 kssjInput.addEventListener("click", calculateVacationDays); jssjInput.addEventListener("click", calculateVacationDays); // 计算休假天数并赋值给 "qjts" 输入框的函数 function calculateVacationDays() { // 获取 "kssj" 和 "jssj" 输入框的值 var kssjValue = kssjInput.value; var jssjValue = jssjInput.value; // 计算休假天数（这里只是示例，你需要根据实际需求进行计算） var vacationDays = /* 在这里进行休假天数的计算 */; // 将计算结果赋值给 "qjts" 输入框 var qjtsInput = document.getElementById("qjts"); qjtsInput.value = vacationDays; } ``` 请注意，上述代码中的 `/* 在这里进行休假天数的计算 */` 部分需要根据你的实际需求进行休假天数的计算逻辑编写。你可以使用日期计算库，如 Moment.js 或日期对象的相关方法来计算日期差值，并将结果赋值给 "qjts" 输入框。另外，你可能还需要确保在文档加载完成后执行这段 JavaScript 代码，可以将代码放置在 `<script>` 标签中，或者在 `<body>` 标签最底部使用 `<script>` 标签包裹代码。

阅读全文

相关推荐

CSS样式属性详解：从基础到高级全面掌握

XML基础教程：从入门到精通

CSS_style属性大全

Js Div属性大全

CSS style属性大全

HTML教程:收集的常用的HTML标签(5)

JavaScript_Quick_Reference

XML数据岛与DSO详解：数据绑定与操作方法

掌握XML数据岛：HTML中的元数据展示技术详解

XML数据源对象DSO在Web设计中的应用与限制

基于JAVA+SpringBoot+MySQL的校园台球厅人员与设备管理系统设计与实现.docx

基于Matlab的CNN神经网络算法实现MNIST手写字体识别项目源码+文档说明（毕业设计）

(完整数据)全国各省、地级市城镇登记失业率面板数据

【java毕业设计】学习交流平台源码（ssm+mysql+说明文档+LW）.zip

【java毕业设计】考研指导平台源码（ssm+mysql+说明文档+LW）.zip

常见的渗透技术和工具.zip

自动化脚本脚本Less-27a.zip

最新推荐

XML轻松学习手册--XML肯定是未来的发展趋势，不论是网页设计师还是网络程序员，都应该及时学习和了解

AJAX获得XML节点的方法

基于JAVA+SpringBoot+MySQL的校园台球厅人员与设备管理系统设计与实现.docx

基于Matlab的CNN神经网络算法实现MNIST手写字体识别项目源码+文档说明（毕业设计）

(完整数据)全国各省、地级市城镇登记失业率面板数据

C语言数组操作：高度检查器编程实践

管理建模和仿真的文件

【KUKA系统变量进阶】：揭秘从理论到实践的5大关键技巧

如何使用Python编程语言创建一个具有动态爱心图案作为背景并添加文字'天天开心（高级版）'的图形界面？

基于Swift开发的嘉定单车LBS iOS应用项目解析