การเขียนโปรแกรม html

6

จะตั้งค่าแอตทริบิวต์ HTML5 ที่ต้องการใน Javascript ได้อย่างไร?

ฉันพยายามทำเครื่องหมายที่textช่องป้อนข้อมูลตามต้องการใน Javascript <input id="edName" type="text" id="name"> หากฟิลด์ถูกทำเครื่องหมายในตอนแรกว่าrequired: <form> <input id="edName" type="text" id="name" required><br> <input type="submit" value="Search"> </form> เมื่อผู้ใช้พยายามส่งจะได้รับข้อผิดพลาดในการตรวจสอบความถูกต้อง: แต่ตอนนี้ฉันต้องการตั้งค่าrequiredแอตทริบิวต์ที่"รันไทม์"ผ่าน Javascript: <form> <input id="edName" type="text" id="name"><br> <input type="submit" value="Search"> </form> ด้วยสคริปต์ที่เกี่ยวข้อง: //recommended W3C HTML5 syntax for boolean attributes document.getElementById("edName").attributes["required"] = ""; ยกเว้นตอนที่ฉันส่งตอนนี้ไม่มีการตรวจสอบความถูกต้องไม่มีบล็อก เป็นสิ่งที่ถูกต้องวิธีการตั้งค่าแอตทริบิวต์บูลีนการตรวจสอบ HTML5 ? jsFiddle คุณถามว่าแอตทริบิวต์มีมูลค่าเท่าใด การตรวจสอบ HTML5 requiredแอตทริบิวต์เป็นเอกสารที่เป็นBoolean: 4.10.7.3.4 …

93 javascript html validation

3

รูปร่างเอียงข้าง (ตอบสนอง)

ฉันกำลังพยายามสร้างรูปร่างเหมือนในภาพด้านล่างโดยมีขอบเอียงเพียงด้านเดียว (เช่นด้านล่าง) ในขณะที่ขอบอีกด้านยังคงตรง ฉันลองใช้วิธีการเส้นขอบ (ระบุรหัสด้านล่าง) แต่ขนาดของรูปร่างของฉันเป็นแบบไดนามิกดังนั้นฉันจึงไม่สามารถใช้วิธีนี้ได้ .shape { position: relative; height: 100px; width: 200px; background: tomato; } .shape:after { position: absolute; content: ''; height: 0px; width: 0px; left: 0px; bottom: -100px; border-width: 50px 100px; border-style: solid; border-color: tomato tomato transparent transparent; } <div class="shape"> Some content </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด ฉันได้ลองใช้การไล่ระดับสีสำหรับพื้นหลังด้วย (เช่นในโค้ดด้านล่าง) …

93 html css responsive-design css-shapes

5

จะเปลี่ยน DIV padding โดยไม่ส่งผลต่อความกว้าง / ความสูงได้อย่างไร?

ฉันมี div ที่ต้องการระบุความกว้างและความสูงคงที่และยังมีช่องว่างภายในซึ่งสามารถเปลี่ยนแปลงได้โดยไม่ต้องลดความกว้าง / ความสูง DIV เดิมหรือเพิ่มขึ้นมีเคล็ดลับ CSS สำหรับสิ่งนั้นหรือทางเลือกอื่นโดยใช้ช่องว่างภายใน?

93 css html

9

วิธีทำให้ HTML เปิดไฮเปอร์ลิงก์ในหน้าต่างหรือแท็บอื่น

นี่คือบรรทัดสำหรับไฮเปอร์ลิงก์ใน HTML: <a href="http://www.starfall.com/">Starfall</a> ดังนั้นหากฉันคลิกที่ "Starfall" เบราว์เซอร์ของฉัน - ฉันกำลังใช้ FireFox - จะพาฉันไปที่หน้าใหม่นั้นและเนื้อหาในหน้าต่างของฉันจะเปลี่ยนไป ฉันสงสัยว่าฉันจะทำสิ่งนี้ใน HTML ได้อย่างไรเพื่อให้หน้าใหม่เปิดขึ้นในหน้าต่างใหม่แทนที่จะเปลี่ยนหน้าก่อนหน้านี้ มีวิธีดังกล่าวใน HTML หรือไม่? และถ้าใช่มีวิธีเปิดหน้าที่ร้องขอในแท็บอื่น (ไม่ใช่หน้าต่างอื่น) ของเบราว์เซอร์ของฉันหรือไม่?

93 html window hyperlink

9

จะจัดเนื้อหา html ทั้งหมดให้อยู่ตรงกลางได้อย่างไร

ฉันจะจัดเนื้อหา html ทั้งหมดให้อยู่ตรงกลางได้อย่างไร

93 html css

5

รีเฟรชส่วนของหน้า (div)

ฉันมีไฟล์ html พื้นฐานที่แนบมากับโปรแกรม java โปรแกรม java นี้อัปเดตเนื้อหาส่วนหนึ่งของไฟล์ HTML ทุกครั้งที่รีเฟรชเพจ ฉันต้องการรีเฟรชเฉพาะส่วนนั้นของหน้าหลังจากแต่ละช่วงเวลา ฉันสามารถวางส่วนที่ฉันต้องการรีเฟรชใน a divได้ แต่ฉันไม่แน่ใจว่าจะรีเฟรชเฉพาะเนื้อหาของไฟล์div. ความช่วยเหลือใด ๆ จะได้รับการชื่นชม ขอบคุณ.

93 javascript html refresh

11

วิธีโหลด CSS Asynchronously

ฉันกำลังพยายามกำจัดไฟล์ CSS 2 ไฟล์ที่แสดงการบล็อกบนไซต์ของฉันซึ่งจะปรากฏใน Google Page Speed Insights ฉันได้ทำตามวิธีการต่างๆ แต่ไม่มีวิธีใดที่ประสบความสำเร็จ แต่เมื่อเร็ว ๆ นี้ฉันพบโพสต์เกี่ยวกับThinking Asyncและเมื่อฉันใช้รหัสนี้<script async src="https://third-party.com/resource.js"></script>มันช่วยขจัดปัญหาได้ อย่างไรก็ตามหลังจากเผยแพร่เพจก็สูญเสียรูปแบบไป ฉันไม่แน่ใจเหมือนกันว่าเกิดอะไรขึ้นเพราะโค้ดใช้งานได้ แต่เป็นการจัดแต่งทรงผมหลังจากอัปโหลดที่ใช้ไม่ได้ ขอขอบคุณสำหรับความช่วยเหลือของคุณในเรื่องนี้ ขอบคุณ

93 html css asynchronous

19

ปัญหา Bootstrap Modal - การเลื่อนถูกปิดใช้งาน

ฉันมีโมดอลและภายในโมดอลนั้นมีดรอปดาวน์ที่แสดงเนื้อหาที่ซ่อนอยู่ขนาดใหญ่ซึ่งใช้งานได้ ตอนนี้เมื่อคุณเปิดโมดอลถัดไปวางซ้อนกันด้านบนของโมดอลแรกและปิดการเลื่อนบนโมดอลด้านล่างจะปิดใช้งาน ฉันได้สร้างตัวอย่างฉบับเต็มรวมถึงขั้นตอนในการจำลองปัญหาที่ฉันกำลังเผชิญอยู่ คุณสามารถดูได้ที่นี่ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <title></title> <style> </style> </head> <body> <input type="button" data-toggle="modal" data-target="#modal_1" class="btn btn-lg btn-primary" value="Open Modal 1" > <div class="modal fade" id="modal_1"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <h4 class="modal-title">First …

93 jquery html twitter-bootstrap

8

เปลี่ยนข้อความฉลากโดยใช้ JavaScript

เหตุใดสิ่งต่อไปนี้จึงไม่เหมาะกับฉัน <script> document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!'; </script> <label id="lbltipAddedComment"></label>

93 javascript html label innerhtml

8

แยก SVG จาก Font Awesome

ฉันต้องการรับข้อมูลเส้นทาง SVG จากFont Awesomeร่ายมนตร์เพื่อให้สามารถใช้เป็น SVG ใน HTML ได้โดยตรง ฉันคิดว่ามันจะง่ายพอ ๆ กับการคัดลอกข้อมูลเส้นทางจากfontawesome-webfont.svgแต่เมื่อฉันใช้มันใน HTML ของฉันสัญลักษณ์ทั้งหมดจะแสดงผลแบบกลับหัว ใครทราบสาเหตุ? (ดู ซอ ) Font Awesome SVG: <glyph unicode="&#xf007;" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 …

93 html svg font-awesome

10

พื้นหลังสไตล์การผูกข้อมูล Vue.js

ฉันพยายามผูก src ของรูปภาพในองค์ประกอบ แต่ดูเหมือนจะไม่ได้ผล ฉันได้รับ "นิพจน์ไม่ถูกต้อง Generated function body: {backgroundImage: {url (image)}" เอกสารกล่าวว่าจะใช้อย่างใดอย่างหนึ่ง 'Kebab กรณี' หรือ 'อูฐกรณี' <div class="circular" v-bind:style="{ backgroundImage: { url(image) }"></div> นี่คือซอ: https://jsfiddle.net/0dw9923f/2/

93 javascript html css vue.js

7

วิธีกำจัดช่องว่างด้านล่าง svg ในองค์ประกอบ div

นี่คือภาพประกอบของปัญหา (ทดสอบใน Firefox และ Chrome): <div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด ดูบน JSFiddle ขอให้สังเกตเพิ่มredพื้นที่ภายในด้านล่างสีฟ้าdivsvg ลองตั้งค่าpaddingและmarginองค์ประกอบทั้งสองเป็น0แล้ว แต่ไม่มีโชค

93 html css svg

9

แอตทริบิวต์ที่ไม่ได้มาตรฐานบนแท็ก HTML สิ่งที่ดี? สิ่งที่ไม่ดี? ความคิดของคุณ?

HTML (หรืออาจเป็นเพียง XHTML?) ค่อนข้างเข้มงวดเมื่อพูดถึงแอตทริบิวต์ที่ไม่ได้มาตรฐานบนแท็ก หากไม่ได้เป็นส่วนหนึ่งของข้อมูลจำเพาะรหัสของคุณจะถือว่าไม่เป็นไปตามข้อกำหนด อย่างไรก็ตามแอตทริบิวต์ที่ไม่ได้มาตรฐานมีประโยชน์พอสมควรสำหรับการส่งผ่านข้อมูลเมตาไปยัง Javascript ตัวอย่างเช่นหากสมมติว่าลิงก์แสดงป๊อปอัปคุณสามารถตั้งชื่อป๊อปอัปในแอตทริบิวต์: <a href="#null" class="popup" title="See the Popup!" popup_title="Title for My Popup">click me</a> หรือคุณสามารถจัดเก็บหัวเรื่องสำหรับป๊อปอัปในองค์ประกอบที่ซ่อนอยู่เช่นช่วง: <style> .popup .title { display: none; } </style> <a href="#null" title="See the Popup!" class="popup"> click me <span class="title">Title for My Popup</span> </a> ฉันฉีกขาดอย่างไรก็ตามควรเป็นวิธีที่ต้องการ วิธีแรกมีความกระชับมากขึ้นและฉันคาดเดาว่าจะไม่ยุ่งกับเครื่องมือค้นหาและโปรแกรมอ่านหน้าจอมากนัก ในทางกลับกันตัวเลือกที่สองทำให้การจัดเก็บข้อมูลจำนวนมากง่ายขึ้นและมีความหลากหลายมากขึ้น นอกจากนี้ยังเป็นไปตามมาตรฐาน ฉันอยากรู้ว่าชุมชนนี้คิดอย่างไร คุณรับมือกับสถานการณ์เช่นนี้อย่างไร? ความเรียบง่ายของวิธีแรกมีมากกว่าข้อเสียที่อาจเกิดขึ้น (ถ้ามี) …

92 javascript html standards

10

การใช้แบบอักษรเดียวกับทั้งเว็บไซต์ด้วย CSS

ฉันต้องการใช้แบบอักษรเดียวชื่อ "แอลจีเรีย" ทั่วทั้งเว็บไซต์ของฉัน ดังนั้นฉันต้องเปลี่ยนแท็ก HTML ทั้งหมดและฉันไม่ต้องการเขียนโค้ดที่แตกต่างกันสำหรับแท็กต่างๆเช่น: button{font-family:Algerian;} div{font-family:Algerian;} วิธีการที่เขียนด้านล่างนี้เป็นสิ่งที่ไม่ควรทำ: div,button,span,strong{font-family:Algerian;}

92 html css fonts font-face

4

Twitter bootstrap ซ่อนองค์ประกอบบนอุปกรณ์ขนาดเล็ก

ฉันมีรหัสนี้: <footer class="row"> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 1</li> <li>Text 2</li> <li>Text 3</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 4</li> <li>Text 5</li> <li>Text 6</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 7</li> <li>Text 8</li> <li>Text 9</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 10</li> <li>Text 11</li> <li>Text 12</li> </ul> …

92 html css twitter-bootstrap twitter-bootstrap-3 responsive-design

คำถามติดแท็ก html