मेरे पास एक पृष्ठ है जहां मैं मूल्यों को संपादित करने के लिए सीएसएस और जावास्क्रिप्ट दोनों का उपयोग कर रहा हूं जैसे:

document.getElementById("Doc1").style.opacity = "value";

हालाँकि इस परिदृश्य में, मैं इसे काम नहीं कर सकता क्योंकि मैं #Image1 . तक नहीं पहुँच सकता

#Image1=/= element.style

एचटीएमएल, सीएसएस कोड

मैं जो करने की कोशिश कर रहा हूं वह आईडी = "इमेज 1" का उपयोग करके एनीमेशन-प्ले-स्टेट बदलना है। कोई भी समाधान?

2
BlackWeed 22 अक्टूबर 2020, 20:28

2 जवाब

सबसे बढ़िया उत्तर

जब आप निम्न का उपयोग करके किसी तत्व की शैली संपादित करते हैं:

document.getElementById("Doc1").style.opacity = "value";

आप किसी तत्व की इनलाइन शैली सेट कर रहे हैं, #Image ब्लॉक द्वारा लागू की गई शैलियां नहीं हैं।

यदि आप #Image ब्लॉक द्वारा लागू शैलियों को संपादित करना चाहते हैं, तो इसके लिए कुछ ब्राउज़र समर्थन हैं। insertRule() और < जैसे कार्यों का उपयोग करना a href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/deleteRule" rel="nofollow noreferrer">deleteRule().

स्टाइलशीट द्वारा लागू शैलियों को संपादित करने के बजाय, मैं तत्वों से कक्षाएं जोड़ या हटा दूंगा।

<div id="my-div" class="is-running">test</div>

<style>
  .is-running { animation-play-state: running; }
  .is-paused { animation-play-state: paused; }
</style>

<script>
  document.getElementById('my-div').classList.remove("is-running");
  document.getElementById('my-div').classList.add("is-paused");
</script>
1
Dylan Landry 22 अक्टूबर 2020, 20:39

आप या तो स्ट्रिंग से # हटा सकते हैं और getElementByID का उपयोग कर सकते हैं या केवल querySelector का उपयोग कर सकते हैं और पूर्ण आईडी पास कर सकते हैं।

id = id.replace("#","");

document.getElementById(id).style.opacity = "value";

या

document.querySelector("#Image1").style.opacity = "value";

यदि आपकी समस्या animation-play-state भाग है तो आप इस विधि का उपयोग कर सकते हैं:

document.getElementById(id).style["animation-play-state"] = "paused";
0
imvain2 22 अक्टूबर 2020, 20:45