如何在我的javascript函式中為影像設定自定義寬度和高度？-有解無憂

我正在嘗試在我的 javascript 函式中為 url 影像設定自定義寬度和高度。有人可以告訴我一個簡單的方法來實作這一點嗎？目前它們的尺寸不同，我希望能夠分別控制每個尺寸。

var IMAGE_SOURCE = "";
var IMAGE_EXTENSION = "";

// const IMAGE_SOURCE = "https://example.com/images/";
// const IMAGE_EXTENSION = ".png";

function tests() {
  let combo = document.getElementById("string_determine");
  let div = document.getElementById("mybox");
  let string_determine;

  switch (combo.options[combo.selectedIndex].text) {
    case '"red"   "blue"':
      string_determine = "purple";
      div.style.color = "purple";
      IMAGE_SOURCE = "https://www.kindpng.com/picc/m/48-486841_purple-paint-splatter-clipart-purple-paint-splatter-clip";
      IMAGE_EXTENSION = ".png";
      break;
    case '"blue"   "green"':
      string_determine = "turquoise";
      div.style.color = "turquoise";
      IMAGE_SOURCE = "https://p.kindpng.com/picc/s/428-4289893_turquoise-splotch-svg-clip-arts-yellow-colour-splash";
      IMAGE_EXTENSION = ".png";
      break;
    case '"green"   "red"':
      string_determine = "brown";
      div.style.color = "brown";
      IMAGE_SOURCE = "https://www.pngkey.com/png/detail/28-287400_splatter-vectors-photos-and-psd-files-brown-paint";
      IMAGE_EXTENSION = ".png";
      break;

    default:
      string_determine = "NONE";
  }

  let myBoxHTML = `<p>${string_determine}</p><img src="${IMAGE_SOURCE}${string_determine}${IMAGE_EXTENSION}">`;
  console.log(myBoxHTML);
  document.getElementById("mybox").innerHTML = myBoxHTML;
}

<!doctype html>
<html>
<select name="string_determine" id="string_determine">
  <option value=>Select Value</option>
  <option value='"red"   "blue"'>"red"   "blue"</option>
  <option value='"blue"   "green"'>"blue"   "green"</option>
  <option value='"green"   "red"'>"green"   "red"</option>
</select>

<button onclick="tests()">Yes</button>

<div class="container">
  <h3>Selection</h3>
  <div id="mybox" class="box">
  </div>
</div>

<script src="script.js" async defer></script>

</html>

uj5u.com熱心網友回復：

您還可以在物件中定義所有屬性（url、title、width、height 等），如下所示：

const images = {
  red_blue: {
    string_determine: "purple",
    color: "purple",
    src:
      "https://www.kindpng.com/picc/m/48-486841_purple-paint-splatter-clipart-purple-paint-splatter-clip",
    ext: ".png",
    width: 120,
    height: 240
  },
}

您將通過當前選擇值加載當前設定。

const images = {
  red_blue: {
    string_determine: "purple",
    color: "purple",
    src:
      "https://www.kindpng.com/picc/m/48-486841_purple-paint-splatter-clipart-purple-paint-splatter-clip",
    ext: ".png",
    width: 120,
    height: 240
  },

  blue_green: {
    string_determine: "turquoise",
    color: "turquoise",
    src:
      "https://p.kindpng.com/picc/s/428-4289893_turquoise-splotch-svg-clip-arts-yellow-colour-splash",
    ext: ".png",
    width: 240,
    height: 240
  },
  green_red: {
    string_determine: "brown",
    color: "brown",
    src:
      "https://www.pngkey.com/png/detail/28-287400_splatter-vectors-photos-and-psd-files-brown-paint",
    ext: ".png",
    width: 320,
    height: 240
  }
};

const combo = document.getElementById("string_determine");
const mybox = document.getElementById("mybox");

function tests() {
  let value = combo.value;
  let props = images[value];
  let url = props.src   props.string_determine   props.ext;
  let imgEl = mybox.querySelector('img');
  let caption = mybox.querySelector('p');
  // create caption p and img if not existing
  if(!imgEl || !caption){
    imgEl = document.createElement('img');
    caption = document.createElement('p');
    mybox.appendChild(caption)
    mybox.appendChild(imgEl)
  }
  imgEl.src=url;
  imgEl.width=props.width;
  imgEl.height=props.height;
  caption.textContent = props.string_determine;
}

img{
  transition: 0.3s
}

<select name="string_determine" id="string_determine" onchange="tests()">
  <option value=>Select Value</option>
  <option value='red_blue'>"red"   "blue"</option>
  <option value='blue_green'>"blue"   "green"</option>
  <option value='green_red'>"green"   "red"</option>
</select>

<button onclick="tests()">Yes</button>

<div class="container">
  <h3>Selection</h3>
  <div id="mybox" class="box">
    
  </div>
</div>

uj5u.com熱心網友回復：

width=""使用和height=""HTML 屬性設定它，如下所示：

const MY_WIDTH = 300
const MY_HEIGHT = 80

var IMAGE_SOURCE = "";
var IMAGE_EXTENSION = "";

// const IMAGE_SOURCE = "https://example.com/images/";
// const IMAGE_EXTENSION = ".png";

function tests() {
  let combo = document.getElementById("string_determine");
  let div = document.getElementById("mybox");
  let string_determine;

  switch (combo.options[combo.selectedIndex].text) {
    case '"red"   "blue"':
      string_determine = "purple";
      div.style.color = "purple";
      IMAGE_SOURCE = "https://www.kindpng.com/picc/m/48-486841_purple-paint-splatter-clipart-purple-paint-splatter-clip";
      IMAGE_EXTENSION = ".png";
      break;
    case '"blue"   "green"':
      string_determine = "turquoise";
      div.style.color = "turquoise";
      IMAGE_SOURCE = "https://p.kindpng.com/picc/s/428-4289893_turquoise-splotch-svg-clip-arts-yellow-colour-splash";
      IMAGE_EXTENSION = ".png";
      break;
    case '"green"   "red"':
      string_determine = "brown";
      div.style.color = "brown";
      IMAGE_SOURCE = "https://www.pngkey.com/png/detail/28-287400_splatter-vectors-photos-and-psd-files-brown-paint";
      IMAGE_EXTENSION = ".png";
      break;

    default:
      string_determine = "NONE";
  }

  let myBoxHTML = `<p>${string_determine}</p><img src="${IMAGE_SOURCE}${string_determine}${IMAGE_EXTENSION}" width="${MY_WIDTH}" height="${MY_HEIGHT}">`;
  console.log(myBoxHTML);
  document.getElementById("mybox").innerHTML = myBoxHTML;
}

<!doctype html>
<html>
<select name="string_determine" id="string_determine">
  <option value=>Select Value</option>
  <option value='"red"   "blue"'>"red"   "blue"</option>
  <option value='"blue"   "green"'>"blue"   "green"</option>
  <option value='"green"   "red"'>"green"   "red"</option>
</select>

<button onclick="tests()">Yes</button>

<div class="container">
  <h3>Selection</h3>
  <div id="mybox" class="box">
  </div>
</div>

<script src="script.js" async defer></script>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/507919.html

標籤：javascript 图片

上一篇：嘗試在DockerCompose檔案中設定卷時出錯

下一篇：利用京東云Web應用防火墻實作Web入侵防護