Jquery starten, sobald die Seite geladen

Question

Ich habe eine Jquery. Hier

$(window).on('load resize', function() { 
    var dm3Width = $('.dm3').width() 
    $('.dm1').width(dm3Width); 
}); 

Demo: https://jsfiddle.net/veusr0xn/

Es ändert dm1, basierend auf der Breite von dm3. Aber es läuft erst, nachdem ich die Größe des Fensters angepasst habe. Wie läuft es, sobald die Seite geladen wird?

Vielen Dank.

Answer 1

Definieren Sie Ihre Abfrage unter $(document).ready(function() Scope so, wenn das Dokument wird Ihre Anfrage automatisch geladen

$(document).ready(function() { 
    var width=$(".dm3").width(); 
    $(".dm1").css('width',width); 
    $(window).resize(function() { 
     var dm3 = $('.dm3').width(); 
     $(".dm1").css('width',dm3); 
    }); 
    }); 

Answer 2

funktioniert Es besteht keine Notwendigkeit für ein Skript mit den Abmessungen zu behandeln. CSS ist ausgereift genug, um mit praktisch allen Präsentationsaspekten umgehen zu können und eine Breite ist eine eher grundlegende Regel.

Anstatt es in Javascript (sehr ineffizient) zu behandeln, empfehle ich Ihnen, beide divs in einen Container zu setzen und seine Breite auf 200px festzulegen, dann fügen Sie die @media-Regel hinzu. Sie haben genau die gleiche Flexibilität, sind aber nicht in der Lage, Skripts zu erstellen.

HTML

<div class="dm"> 
    <div class="dm3"> 
    DM3 
    </div> 

    <div class="dm1"> 
    DM1 
    </div> 
</div> 

CSS

.dm { width: 200px; } 
.dm3 { background-color: blue; } 
.dm1 { background-color: breen; } 

@media only screen and (max-width: 400px) { 
    .dm { 
    width: 400px; 
    } 
} 

es in die Aktion mit diesem FIDDLE See.

Answer 3

dieses

$(window).on('resize',function() { 
 
    var dm3Width = $('.dm3').width() // Get dm3 width 
 
    $('.dm1').width(dm3Width); // Make dm1 width match dm3 width 
 
}); 
 
$(document).ready(function() { 
 
    $(window).trigger('resize'); 
 
});

.dm3 { 
 
    width: 200px; 
 
    background: blue; 
 
} 
 

 
.dm1 { 
 
    background: green; 
 
    width: 100px; 
 
} 
 

 
@media only screen and (max-width: 400px) { 
 
    .dm3 { 
 
    width: 400px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dm3"> 
 
    DM3 
 
</div> 
 

 

 
<div class="dm1"> 
 
    DM1 
 
</div>