按鈕和輸入元素未應用 css 樣式：背景
[英]Button and input elements doesn't get applied css style : background
問題描述
我想帶來類似於圖中所示的輸出。 我在 table2() 中構建表格並使用 ButtonDOM() 構建按鈕。
我想得到如圖所示的布局，所以我讓按鈕元素向右移動一些像素。 我在 css 中有一個基本問題，
為了使元素向左、向右、頂部、底部移動，我必須將位置屬性設置為相對或絕對，但是當我調整窗口大小時，我看到元素以不正確的方式重新排列。 我想在窗口調整大小元素上向左、向右、頂部、底部移動元素以正確顯示。 如何實現這一目標？
我已將背景顏色應用於整個 div，但我看到按鈕和日期輸入元素出現在 div 之外，盡管所有這些元素都在此 div 內。
注意：我必須將輸入日期和按鈕元素相對和絕對定位，並將 div #buttonsdiv 相對定位到我需要的位置元素
function maintest () { table2(); ButtonDOM(); addClasses(); } function table2 () { let h = $("<h3>").html("Borrowable Features:").prop("class","underline").appendTo("#BorrowableTable"); let h1 = $("<h3>").html("Features:").prop("class","underline").appendTo("#BorrowableTable"); let $table = $('<table>').attr({"id" : "borrowable"}).css({"width":"50%"}); let $row1 = $('<tr>').appendTo($table); $('<td>').appendTo($row1); let header = $('<td>').text("Feature").appendTo($row1); let $row2 = $('<tr>').prop("id","autocompleterow").appendTo($table); let $cell0 = $('<td>').appendTo($row2); let $cell1 = $('<td>').appendTo($row2); let $autocomplete1 = $("<input>").attr({"id" : "selector0","class":"creamcolorInput"}).appendTo($cell1); $("#BorrowableTable").append($table); autocomplete2 = $("#selector0").autocomplete( {"source": ['c++','java','javascript']}, {select: function(event, ui) { selectedObj = ui.item.value; } }); } function addClasses () { let tableRows = $('tr').addClass('tableRows'); let tableDefn = $('td').attr({"class":"tableDefn"}); let tableHeader = $('th').attr({"class":"tableHeader"}); let tbodyDOM = $('tbody').attr({"class" : "tbodyDOM"}); } function ButtonDOM() { let buttonsdiv = $("<div></div>").attr({"id":"buttonsdiv"}).css({"width":"50%"}).appendTo($("#BorrowableTable")); let returnDate = $("<input>").attr({"id":"returnDate"}).appendTo($('#buttonsdiv')); $( "#returnDate" ).datepicker({ dateFormat: 'yy-mm-dd' }).attr({"class":"creamcolorInput"}); $("<td>").html("Return Date").insertBefore(returnDate).css({"position":"relative","left":"350px","display":"inline"}); $("<button>Borrow</button>").attr({"value":"Save","id":"borrowButton"}).appendTo(buttonsdiv) }
#buttonsdiv { height: unset !important; width:50%; position: relative; left :50px !important; bottom :0px !important; background-color: papayawhip !important; } #BorrowableTable { display: flex !important; flex-direction: column; height:fit-content !important; } #borrowable { display: unset !important; border-collapse: collapse; border-spacing :unset !important; margin-left:100px; } #BorrowableTable,.creamcolorInput,#buttonsdiv { background-color: papayawhip; } #borrowButton { position: absolute; left: 325px; top: 50px; height: 36px; width: 205px; cursor: pointer; border: solid 1px; background-color:whitesmoke; font-family: ffunit; font-size: 14px; margin-top: 35px; margin-left: 2px; } #returnDate { position: absolute; left : 330px !important; top:25px; height:36px; width:200px; } .tableRows, .tableDefn, .tableHeader { /*added from addClasses() */ padding: 0; margin: 0; font-family: ffunit; font-size: 14px; font-weight: bold; padding-right: 50px !important; } button { height:36px; width:205px; cursor: pointer; border: solid 1px; background-color:whitesmoke; font-family: ffunit; font-size: 14px; margin-top:35px; margin-left: 2px; } input { height: 30px; width: 250px; font-size: 20px; text-indent: 6px; } .tbodyDOM { float: left !important; } .images { position: relative !important; cursor: pointer !important; width:35px !important; height:35px !important; left: 35px !important; } .underline { text-decoration: underline; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <body onload="maintest()"> <div id="BorrowableTable"></div> </body>
1 個解決方案
解決方案1
0 2020-02-20 12:10:45
我已經對 javascript 和 css 進行了更改，請檢查並更新
function maintest () { table2(); ButtonDOM(); addClasses(); } function table2 () { let h = $("<h3>").html("Borrowable Features:").prop("class","underline").appendTo("#BorrowableTable"); let h1 = $("<h3>").html("Features:").prop("class","underline").appendTo("#BorrowableTable"); let $table = $('<table>').attr({"id" : "borrowable"}).css({"width":"50%"}); let $row1 = $('<tr>').appendTo($table); $('<td>').appendTo($row1); let header = $('<td>').text("Feature").appendTo($row1); let $row2 = $('<tr>').prop("id","autocompleterow").appendTo($table); let $cell0 = $('<td>').appendTo($row2); let $cell1 = $('<td>').appendTo($row2); let $autocomplete1 = $("<input>").attr({"id" : "selector0","class":"creamcolorInput"}).appendTo($cell1); $("#BorrowableTable").append($table); autocomplete2 = $("#selector0").autocomplete( {"source": ['c++','java','javascript']}, {select: function(event, ui) { selectedObj = ui.item.value; } }); } function addClasses () { let tableRows = $('tr').addClass('tableRows'); let tableDefn = $('td').attr({"class":"tableDefn"}); let tableHeader = $('th').attr({"class":"tableHeader"}); let tbodyDOM = $('tbody').attr({"class" : "tbodyDOM"}); } function ButtonDOM() { let buttonsdiv = $("<div></div>").attr({"id":"buttonsdiv"}).css({"width":"50%"}).appendTo($("#BorrowableTable")); let returnDate = $("<input>").attr({"id":"returnDate"}).appendTo($('#buttonsdiv')); $( "#returnDate" ).datepicker({ dateFormat: 'yy-mm-dd' }).attr({"class":"creamcolorInput"}); $("<td>").html("Return Date").insertBefore(returnDate).css({}); $("<button>Borrow</button>").attr({"value":"Save","id":"borrowButton"}).appendTo(buttonsdiv) }
#buttonsdiv { height: unset !important; width:50%; position: relative; left :50px !important; bottom :0px !important; background-color: papayawhip !important; } #BorrowableTable { display: flex !important; flex-direction: column; height:fit-content !important; } #borrowable { display: unset !important; border-collapse: collapse; border-spacing :unset !important; margin-left:100px; } #BorrowableTable,.creamcolorInput,#buttonsdiv { background-color: papayawhip; } #borrowButton { cursor: pointer; border: solid 1px; background-color:whitesmoke; font-family: ffunit; font-size: 14px; margin-top: 35px; margin-left: 2px; } #returnDate { height:36px; width:200px; } .tableRows, .tableDefn, .tableHeader { /*added from addClasses() */ padding: 0; margin: 0; font-family: ffunit; font-size: 14px; font-weight: bold; padding-right: 50px !important; } button { height:36px; width:205px; cursor: pointer; border: solid 1px; background-color:whitesmoke; font-family: ffunit; font-size: 14px; margin-top:35px; margin-left: 2px; } input { height: 30px; width: 250px; font-size: 20px; text-indent: 6px; } .tbodyDOM { float: left !important; } .images { position: relative !important; cursor: pointer !important; width:35px !important; height:35px !important; left: 35px !important; } .underline { text-decoration: underline; } <!-- begin snippet: js hide: false console: true babel: null -->
使用CSS Scale / Matrix不會使背景與元素保持一致
[英]Using CSS Scale/Matrix doesn't keep background aligned with elements
CSS樣式已應用並顯示，但是JS無法識別所應用的CSS
[英]CSS styles are applied and displayed but JS doesn't recognize the CSS applied
HTML // CSS // JavaScript：按鈕或輸入未顯示在網絡上
[英]HTML // CSS // JavaScript : button or input doesn't show up on web
即使我消除了背景圖片，jqGrid altRows也不被應用
[英]jqGrid altRows doesn't get applied at all even when I eliminate background-image
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.