这样就产生了一个圆角div
实现原理:原理其实很简单,在div的top和bottom 加上三条线,用这三条线的不同长度来产生圆角的效果。

实现过程: 如何实现这三条线呢。 用<b> 这个元素,将其高">
suchen
HeimWeb-Frontendjs-TutorialJavascript 圆角div的实现代码_javascript技巧

现在实现圆角普遍用图片来控制,这种方法有其优点(产生的圆角平滑)。 但同时他也要求有吻合的图片,如果要动态的改变div的样式颜色则有些力不从心。还有就是用js来实现。
实现后的调用代码 如下

复制代码 代码如下:

var objDiv = getRoundDiv.call(document,"solid 1px yellow","#dddddd")
objDiv.Div.style.width="100px";
objDiv.Content.style.margin="6 6 6 6 "
objDiv.Content.innerText="这是一个圆角div测试"
document.body.appendChild(objDiv.Div);


这样就产生了一个圆角div
实现原理:原理其实很简单,在div的top和bottom 加上三条线,用这三条线的不同长度来产生圆角的效果。

实现过程: 如何实现这三条线呢。 用 这个元素,将其高度 设置为1px 。如果要显示边框则为其添加左边框和右边框。添加好线条以后,将内容div 和这三条线放在一个容器里,这个容器也是一个div。最终返回一个div类,这个类放两个属性,一个是容器div,通过这个容器div可以控制图形出现的位置和大小高度等属性。另一个属性是内容div,通过这个div可以设置这个div的内容,margin,字体颜色,背景颜色,字体大小,等属性。

注意的问题: 调用 getRoundDiv 这个方法需要传递一个方法上下文。我的理解是方法上下文相当与一个指针,指向调用方法的对象。为什么要用这个方法上下文呢? 比如要在ie的 creatPopup 方法 产生出来的popup文档内新建一个圆角div的话,由于popup只能加载他自己创建的控件,所以可以将popup对象传递到方法内部,成为方法上下文指向的对象。 传递上下文的方法有两种function.call(obj,"arg1","arg2") 类似与这样。 另一种是 function.apply(obj,arguments)

详细代码如下:
复制代码 代码如下:

/**************************************************************************/
/*RoundDiv.js 产生一个圆角div
调用前需设置函数上下文(上下文是指,要创建div的窗口) 例如 var objDiv = getRoundDiv.call(document,"","#dddddd")
函数参数argBorderStyle: 边框样式,字符串 例如 "1px solid black"
函数参数argBgColor: 背景颜色,字符串 例如 "#ffffff"
现在只支持边框为1像素 如果超过1像素产生的图形会比较奇怪
如果不设置边框 则没有边框 可以正常使用
本函数返回的是一个RoundDiv自定义类
如果要设置div的内容请用 obj.Content.innerHtml 或 obj.Content.innerText设置
如果要设置div的高度请用 obj.Div.style.width obj.Div.style.height设置
*/
/**************************************************************************/
/**************************************************************************/
//取得一个圆角div
function getRoundDiv(argBorderStyle,argBgColor){

    //创建元素
    var divPane =this.createElement("div")
    var divContent =this.createElement("div")
    var divContentMax =this.createElement("div")
    var bTop =this.createElement("b")
    var bBottom =this.createElement("b")
    var bTop1 =this.createElement("b")
    var bTop2 =this.createElement("b")
    var bTop3 =this.createElement("b")
    var bTop4 =this.createElement("b")
    var bBottom1 =this.createElement("b")
    var bBottom2 =this.createElement("b")
    var bBottom3 =this.createElement("b")
    var bBottom4 =this.createElement("b")

    //背景设置
    divPane.style.backgroundColor=argBgColor;
    divContent.style.backgroundColor=argBgColor;
    divContentMax.style.backgroundColor=argBgColor;

    bTop1.style.backgroundColor=argBgColor;
    bTop2.style.backgroundColor=argBgColor;
    bTop3.style.backgroundColor=argBgColor;
    bTop4.style.backgroundColor=argBgColor;
    bBottom1.style.backgroundColor=argBgColor;
    bBottom2.style.backgroundColor=argBgColor;
    bBottom3.style.backgroundColor=argBgColor;
    bBottom4.style.backgroundColor=argBgColor;
    bTop.style.backgroundColor="#ffffff";
    bBottom.style.backgroundColor="#ffffff";

    //样式设置
    bTop.style.overflow="hidden";
    bBottom.style.overflow="hidden";
    bTop1.style.overflow="hidden";
    bTop2.style.overflow="hidden";
    bTop3.style.overflow="hidden";
    bTop4.style.overflow="hidden";
    bBottom1.style.overflow="hidden";
    bBottom2.style.overflow="hidden";
    bBottom3.style.overflow="hidden";
    bBottom4.style.overflow="hidden";

    bTop.style.display="block";
    bBottom.style.display="block";
    bTop1.style.display="block";
    bTop2.style.display="block";
    bTop3.style.display="block";
    bTop4.style.display="block";
    bBottom1.style.display="block";
    bBottom2.style.display="block";
    bBottom3.style.display="block";
    bBottom4.style.display="block";

    
    //高度设置
    divContent.style.height="100%";
    divContentMax.style.height="100%";

    bTop1.style.height="1px";
    bTop2.style.height="1px";
    bTop3.style.height="1px";
    bTop4.style.height="2px";

    bBottom1.style.height="1px";
    bBottom2.style.height="1px";
    bBottom3.style.height="1px";
    bBottom4.style.height="2px";

    
    //边框设置
    divContentMax.style.borderLeft=argBorderStyle
    divContentMax.style.borderRight=argBorderStyle

    bTop1.style.borderLeft=argBorderStyle;
    bTop1.style.borderRight=argBorderStyle;
    bTop1.style.borderTop=argBorderStyle;
    bTop2.style.borderLeft=argBorderStyle;
    bTop2.style.borderRight=argBorderStyle;
    bTop3.style.borderLeft=argBorderStyle;
    bTop3.style.borderRight=argBorderStyle;
    bTop4.style.borderRight=argBorderStyle;
    bTop4.style.borderLeft=argBorderStyle;
    bBottom1.style.borderLeft=argBorderStyle;
    bBottom1.style.borderRight=argBorderStyle;
    bBottom1.style.borderTop=argBorderStyle;
    bBottom2.style.borderLeft=argBorderStyle;
    bBottom2.style.borderRight=argBorderStyle;
    bBottom3.style.borderLeft=argBorderStyle;
    bBottom3.style.borderRight=argBorderStyle;
    bBottom4.style.borderLeft=argBorderStyle;
    bBottom4.style.borderRight=argBorderStyle;

    
    //空白间距设置
    bTop1.style.margin="0 4px 0 4px"
    bTop2.style.margin="0 3px 0 3px"
    bTop3.style.margin="0 2px 0 2px"
    bTop4.style.margin="0 1px 0 1px"

    bBottom1.style.margin="0 4px 0 4px"
    bBottom2.style.margin="0 3px 0 3px"
    bBottom3.style.margin="0 2px 0 2px"
    bBottom4.style.margin="0 1px 0 1px"

    //控件拼装
    bTop.appendChild(bTop1);
    bTop.appendChild(bTop1);
    bTop.appendChild(bTop2);
    bTop.appendChild(bTop3);
    bTop.appendChild(bTop4);    
    bBottom.appendChild(bBottom4);
    bBottom.appendChild(bBottom3);
    bBottom.appendChild(bBottom2);
    bBottom.appendChild(bBottom1);

    divContentMax.appendChild(divContent)
    divPane.appendChild(bTop)
    divPane.appendChild(divContentMax)
    divPane.appendChild(bBottom)
    var objRoundDiv = new RoundDiv();
    objRoundDiv.Div=divPane;
    objRoundDiv.Content=divContent;
    return objRoundDiv;

}
/**************************************************************************/
/**************************************************************************/
//自定义类(用来装载div对应内容)
function RoundDiv(){
    this.content=0;//div内容
    this.div=0;//div容器
}
/**************************************************************************/

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Ist JavaScript in C geschrieben? Prüfung der BeweiseIst JavaScript in C geschrieben? Prüfung der BeweiseApr 25, 2025 am 12:15 AM

Ja, der Motorkern von JavaScript ist in C. 1) Die C -Sprache bietet eine effiziente Leistung und die zugrunde liegende Steuerung, die für die Entwicklung der JavaScript -Engine geeignet ist. 2) Die V8-Engine als Beispiel wird sein Kern in C geschrieben, wobei die Effizienz und objektorientierte Eigenschaften von C kombiniert werden.

JavaScripts Rolle: das Web interaktiv und dynamisch machenJavaScripts Rolle: das Web interaktiv und dynamisch machenApr 24, 2025 am 12:12 AM

JavaScript ist das Herzstück moderner Websites, da es die Interaktivität und Dynamik von Webseiten verbessert. 1) Es ermöglicht die Änderung von Inhalten, ohne die Seite zu aktualisieren, 2) Webseiten durch DOMAPI zu manipulieren, 3) Komplexe interaktive Effekte wie Animation und Drag & Drop, 4) die Leistung und Best Practices optimieren, um die Benutzererfahrung zu verbessern.

C und JavaScript: Die Verbindung erklärteC und JavaScript: Die Verbindung erklärteApr 23, 2025 am 12:07 AM

C und JavaScript erreichen die Interoperabilität durch WebAssembly. 1) C -Code wird in das WebAssembly -Modul zusammengestellt und in die JavaScript -Umgebung eingeführt, um die Rechenleistung zu verbessern. 2) In der Spieleentwicklung kümmert sich C über Physik -Engines und Grafikwiedergabe, und JavaScript ist für die Spiellogik und die Benutzeroberfläche verantwortlich.

Von Websites zu Apps: Die verschiedenen Anwendungen von JavaScriptVon Websites zu Apps: Die verschiedenen Anwendungen von JavaScriptApr 22, 2025 am 12:02 AM

JavaScript wird in Websites, mobilen Anwendungen, Desktop-Anwendungen und serverseitigen Programmierungen häufig verwendet. 1) In der Website -Entwicklung betreibt JavaScript DOM zusammen mit HTML und CSS, um dynamische Effekte zu erzielen und Frameworks wie JQuery und React zu unterstützen. 2) Durch reaktnatives und ionisches JavaScript wird ein plattformübergreifendes mobile Anwendungen entwickelt. 3) Mit dem Elektronenframework können JavaScript Desktop -Anwendungen erstellen. 4) Node.js ermöglicht es JavaScript, auf der Serverseite auszuführen und unterstützt hohe gleichzeitige Anforderungen.

Python gegen JavaScript: Anwendungsfälle und Anwendungen verglichenPython gegen JavaScript: Anwendungsfälle und Anwendungen verglichenApr 21, 2025 am 12:01 AM

Python eignet sich besser für Datenwissenschaft und Automatisierung, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python funktioniert in Datenwissenschaft und maschinellem Lernen gut und unter Verwendung von Bibliotheken wie Numpy und Pandas für die Datenverarbeitung und -modellierung. 2. Python ist prägnant und effizient in der Automatisierung und Skripten. 3. JavaScript ist in der Front-End-Entwicklung unverzichtbar und wird verwendet, um dynamische Webseiten und einseitige Anwendungen zu erstellen. 4. JavaScript spielt eine Rolle bei der Back-End-Entwicklung durch Node.js und unterstützt die Entwicklung der Vollstapel.

Die Rolle von C/C bei JavaScript -Dolmetschern und CompilernDie Rolle von C/C bei JavaScript -Dolmetschern und CompilernApr 20, 2025 am 12:01 AM

C und C spielen eine wichtige Rolle in der JavaScript -Engine, die hauptsächlich zur Implementierung von Dolmetschern und JIT -Compilern verwendet wird. 1) C wird verwendet, um JavaScript -Quellcode zu analysieren und einen abstrakten Syntaxbaum zu generieren. 2) C ist für die Generierung und Ausführung von Bytecode verantwortlich. 3) C implementiert den JIT-Compiler, optimiert und kompiliert Hot-Spot-Code zur Laufzeit und verbessert die Ausführungseffizienz von JavaScript erheblich.

JavaScript in Aktion: Beispiele und Projekte in realer WeltJavaScript in Aktion: Beispiele und Projekte in realer WeltApr 19, 2025 am 12:13 AM

Die Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.

JavaScript und das Web: Kernfunktionalität und AnwendungsfälleJavaScript und das Web: Kernfunktionalität und AnwendungsfälleApr 18, 2025 am 12:19 AM

Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

SecLists

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.

PHPStorm Mac-Version

PHPStorm Mac-Version

Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

MantisBT

MantisBT

Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

Herunterladen der Mac-Version des Atom-Editors

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor