Попытка установить ширину и высоту для 4 изображений, но работает только один; другие пропускаются. Идентификаторы отличаются друг от друга

Question

Я пытаюсь использовать четыре полуоваля для создания одного полного овала, чтобы увеличить или уменьшить размер овала и увеличить или уменьшить размер по сравнению с центром, а не с одной стороны. Я нашел другой код, требующий сделать это с одним изображением, но каждый раз обнаружил, что это ложное требование. Использование четырех изображений и установка их для регулировки размера в их соответствующих направлениях кажется единственным способом. Когда я реализую то, что могу, я вижу, что он будет работать. Я просто сталкиваюсь с проблемой, когда javascript хочет быть разборчивым и просто не хочет устанавливать атрибуты для размеров всех четырех изображений, атрибуты установлены для первого, хотя, и когда я переключаю порядок вокруг, я может видеть, что каждый из них будет работать индивидуально, но только не сразу. Кроме того, посмотрите внимательно, я использовал разные идентификаторы для всех них.

Вот код, который не хочет работать:

<img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleTR.png" 
 
id="widthTR" id="heightTR" style="position: absolute; bottom: 58px; left: 149px"/> 
 

 
<img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleBR.png" 
 
id="widthBR" id="heightBR" style="position: absolute; top: 58px; left: 149px"/> 
 

 
<img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleBL.png" 
 
id="widthBL" id="heightBL" style="position: absolute; top: 58px; right: 149px"/> 
 
    
 
<img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleTL.png" 
 
id="widthTL" id="heightTL" style="position: absolute; bottom: 58px; right: 149px"/> 
 

 

 
<script> 
 
    
 
spillWi = 100 
 
spillHi = 25 
 
    
 
document.getElementById("widthTR").setAttribute("width", spillWi) 
 
document.getElementById("heightTR").setAttribute("height", spillHi) 
 
    
 
document.getElementById("widthBR").setAttribute("width", spillWi) 
 
document.getElementById("heightBR").setAttribute("height", spillHi) 
 
    
 
document.getElementById("widthBL").setAttribute("width", spillWi) 
 
document.getElementById("heightBL").setAttribute("height", spillHi) 
 
    
 
document.getElementById("widthTL").setAttribute("width", spillWi) 
 
document.getElementById("heightTL").setAttribute("height", spillHi) 
 
    
 
</script>

Answer 1

Итак, вот исправленный код:

<div id="ovalElt" style="position: relative; width: 300px; height: 120px;"> 
 
<img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleTR.png" 
 
id="eltTR" style="position: absolute; top: 2px; right: 8px"/> 
 

 
<img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleBR.png" 
 
id="eltBR" style="position: absolute; bottom: 2px; right: 8px"/> 
 

 
<img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleBL.png" 
 
id="eltBL" style="position: absolute; bottom: 2px; left: 8px"/> 
 
    
 
<img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleTL.png" 
 
id="eltTL" style="position: absolute; top: 2px; left: 8px"/> 
 
</div> 
 

 
<script> 
 
    
 
spillWi = 149; 
 
spillHi = 58; 
 
    
 
document.getElementById("eltTR").setAttribute("width", spillWi); 
 
document.getElementById("eltTR").setAttribute("height", spillHi); 
 
    
 
document.getElementById("eltBR").setAttribute("height", spillHi); 
 
document.getElementById("eltBR").setAttribute("width", spillWi); 
 
    
 
document.getElementById("eltBL").setAttribute("width", spillWi); 
 
document.getElementById("eltBL").setAttribute("height", spillHi); 
 
    
 
document.getElementById("eltTL").setAttribute("width", spillWi); 
 
document.getElementById("eltTL").setAttribute("height", spillHi); 
 
    
 
</script>

Her е это версия с изображениями и CSS:

<div id="eltOval"> 
 
    <img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleTR.png" id="eltTR" class="elt"/> 
 

 
    <img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleBR.png" id="eltBR" class="elt"/> 
 

 
    <img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleBL.png" id="eltBL" class="elt"/> 
 
    
 
    <img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleTL.png" id="eltTL" class="elt"/> 
 
</div> 
 

 
<style> 
 
    #eltOval { position: relative; width: 300px; height: 120px; } 
 
    .elt { 
 
     position: absolute; 
 
     width: 149px; 
 
     height: 58px; 
 
    } 
 
    #eltTR { top: 2px; right: 8px; } 
 
    #eltBR { bottom: 2px; right: 8px; } 
 
    #eltBL { bottom: 2px; left: 8px; } 
 
    #eltTL { top: 2px; left: 8px; } 
 
    
 
</style>

А потом, вот чистый CSS версия (цвет aproximated):

<div id="eltOval" > </div> 
 

 
<style> 
 
    #eltOval { 
 
     position: absolute; 
 
     top: 2px; 
 
     left: 8px; 
 
     width: 300px; 
 
     height: 120px; 
 
     border-radius: 50%; 
 
     background-color: #CC70FF; 
 
    } 
 
    
 
</style>

Answer 2

<img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleTR.png" 
id="widthTR" style="position: absolute; bottom: 58px; left: 149px"/> 

<img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleBR.png" 
id="widthBR" style="position: absolute; top: 58px; left: 149px"/> 

<img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleBL.png" 
id="widthBL" style="position: absolute; top: 58px; right: 149px"/> 

<img src="https://dl.dropboxusercontent.com/u/34546427/BBBS-edc/PuddleTL.png" 
id="widthTL" style="position: absolute; bottom: 58px; right: 149px"/> 


<script> 

spillWi = 100 
spillHi = 25 

document.getElementById("widthTR").setAttribute("width", spillWi) 
document.getElementById("widthTR").setAttribute("height", spillHi) 

document.getElementById("widthBR").setAttribute("width", spillWi) 
document.getElementById("widthBR").setAttribute("height", spillHi) 

document.getElementById("widthBL").setAttribute("width", spillWi) 
document.getElementById("widthBL").setAttribute("height", spillHi) 

document.getElementById("widthTL").setAttribute("width", spillWi) 
document.getElementById("widthTL").setAttribute("height", spillHi) 

</script> 

Решает ли это решение ур вопрос? Вам нужно удалить второй идентификатор и использовать его для установки атрибутов.

Answer 3

Ни один из ранних ответов не объясняет, что происходит не так. Вы устанавливаете атрибуты элементов перед созданием страницы. Если вы вставляете код между $(function() {//called when ready (DOM is built) ... }) , ширина изменяется, как и следовало ожидать.