জাভাস্ক্রিপ্টে ডিআইভি প্রস্থ এবং উচ্চতা সেট করা

108

আমি একটি আছে divসঙ্গে id="div_register"। আমি এটি widthজাভাস্ক্রিপ্টে গতিশীল সেট করতে চাই ।

আমি এই নিম্নলিখিত কোডটি ব্যবহার করছি:

getElementById('div_register').style.width=500;

কিন্তু কোডের এই লাইনটি কাজ করছে না।

আমি pxনিম্নলিখিতগুলির মতো ইউনিটগুলি ব্যবহার করার চেষ্টা করেছি , এখনও ভাগ্য নেই:

getElementById('div_register').style.width='500px';

এবং

getElementById('div_register').style.width='500';

এবং

getElementById('div_register').style.width=500px;

তবে এই কোডটির কোনওটিই আমার পক্ষে কাজ করছে না।

আমি জানি না কি ভুল হচ্ছে।

আমি মজিলা ফায়ারফক্স ব্যবহার করছি।

সম্পাদনা

<html>
    <head>
        <title>Untitled</title>
        <script>
            function show_update_profile() {
                document.getElementById('black_fade').style.display='block';
                //document.getElementById.('div_register').style.left=((window.innerWidth)-500)/20;
                document.getElementById('div_register').style.height= "500px";
                document.getElementById('div_register').style.width= '500px';
                //alert('kutta');
                  document.getElementById('div_register').style.display='block';
                document.getElementById('register_flag').value= 1;
                document.getElementById('physical_flag').value= 0;
                document.getElementById('cultural_flag').value= 0;
                document.getElementById('professional_flag').value= 0;
                document.getElementById('lifestyle_flag').value= 0;
                document.getElementById('hobby_flag').value= 0;
                //alert(window.innerWidth);
            }
        </script>
        <style>
            .white_content {
                display:none;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <input type="button" onclick="javascript:show_update_profile();" id="show" name="show" value="show"/>
        </div>
        <div id="div_register">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
                      welcome 
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

javascript

— Saswat
সূত্র

আপনি onloadইভেন্টটি হওয়ার পরে প্রস্থটি সেট করার চেষ্টা করেছেন?

— সাইক্লোনকোড

1

আপনি কি পরীক্ষা করেছেন, এটি div_registerআপনার উপাদানটির সঠিক আইডি? হয়তো আমাদের কিছু এইচটিএমএলও দিন ... ঠিক style.width="500px";হওয়া উচিত।

— পাওয়ারমিচা

আমি ডকুমেন্ট.জেটএলমেন্টবিআইআইডি ('Div_register') সেট করেছি style

— সাসওয়াত

1

এর মূল্য কী, আপনার ফাংশনের 3 এবং 4 লাইনে "ডকুমেন্ট" শব্দটিতে টাইপস রয়েছে ... যা সম্ভবত এটি কাজ করা থেকে বিরত রাখবে।

— ড্যানিয়েল জাজো

1

onclick="show_update_profile()"পরিবর্তে ব্যবহার করুনonclick="javascript:show_update_profile()"

— তেজস্বা ধ্যানী

227

আপনি যে বৈশিষ্ট্যগুলি ব্যবহার করছেন সেগুলি ফায়ারফক্স, ক্রোম এবং অন্যান্য নন-আইই ব্রাউজারগুলিতে কাজ করতে পারে না। সমস্ত ব্রাউজারে এই কাজটি করতে, আমি নিম্নলিখিতগুলি যুক্ত করার পরামর্শ দিই:

document.getElementById('div_register').setAttribute("style","width:500px");

ক্রস-সামঞ্জস্যের জন্য, আপনাকে এখনও সম্পত্তি ব্যবহার করতে হবে। অর্ডারও ব্যাপার হতে পারে। উদাহরণস্বরূপ, আমার কোডে, জাভাস্ক্রিপ্টের সাথে শৈলীর বৈশিষ্ট্য নির্ধারণ করার সময় আমি প্রথমে শৈলীর বৈশিষ্ট্যটি সেট করি, তারপরে আমি বৈশিষ্ট্যগুলি সেট করি:

document.getElementById("mydiv").setAttribute("style","display:block;cursor:pointer;cursor:hand;");
document.getElementById("mydiv").style.display = "block";
document.getElementById("mydiv").style.cursor = "hand";

সুতরাং, আপনার জন্য সর্বাধিক ক্রস ব্রাউজার সুসংগত উদাহরণ হ'ল:

document.getElementById('div_register').setAttribute("style","display:block;width:500px");
document.getElementById('div_register').style.width='500px';

আমি এটিও উল্লেখ করতে চাই যে স্টাইলগুলি পরিচালনা করার একটি আরও সহজ পদ্ধতি হ'ল সিএসএস শ্রেণির নির্বাচক ব্যবহার করা এবং আপনার স্টাইলগুলি বাহ্যিক সিএসএস ফাইলগুলিতে স্থাপন করা। কেবলমাত্র আপনার কোডটি অনেক বেশি রক্ষণাবেক্ষণযোগ্য হবে না, তবে আপনি প্রকৃতপক্ষে আপনার ওয়েব ডিজাইনারদের সাথেও বন্ধু বানাবেন!

document.getElementById("div_register").setAttribute("class","wide");

.wide {
    display:block;
    width:500px;
}

.hide {
    display:none;
}

.narrow {
    display:block;
    width:100px;
}

এখন, আমি সহজেই একাধিক বৈশিষ্ট্য কল করার পরিবর্তে কেবল একটি শ্রেণীর বৈশিষ্ট্য, একটি একক সম্পত্তি যুক্ত করতে এবং মুছে ফেলতে পারি। তদুপরি, যখন আপনার ওয়েব ডিজাইনার এর প্রশস্ত হওয়া মানে কী তার সংজ্ঞাটি পরিবর্তন করতে চান, তখন তাকে আপনার সুন্দরভাবে রক্ষণাবেক্ষণ করা জাভাস্ক্রিপ্ট কোডটিতে ঘুরে বেড়াতে হবে না। আপনার জাভাস্ক্রিপ্ট কোডটি অচ্ছুত রয়ে গেছে, তবুও আপনার অ্যাপ্লিকেশনটির থিমটি সহজেই কাস্টমাইজ করা যায়।

এই কৌশলটি আপনার আচরণ (জাভাস্ক্রিপ্ট) এবং আপনার উপস্থাপনা (সিএসএস) থেকে আপনার সামগ্রী (এইচটিএমএল) আলাদা করার নিয়ম অনুসরণ করে।

— jmort253
সূত্র

1

এটি কি অন্য সমস্ত স্টাইলের বৈশিষ্ট্যগুলিকে ওভাররাইড করবে না? যেমন প্রশ্নের একটি মন্তব্যে উল্লেখ করা হয়েছে, display: blockসেটও করা হয়েছিল।

— পাওয়ারমিচা

2

শৈলীর বৈশিষ্ট্যটি ব্যবহার করার সাথে সাথে সমস্ত কিছু সেট করুন। আমার নিজের পরীক্ষিত এবং কার্যকারী কোড থেকে আমার উদাহরণে, আমি display:block;cursor:pointer;cursor:handসমস্ত সেট একই সেটঅ্যাট্রিবিউট কলটিতে রেখেছি। আপনি যদি নিজের জীবনটি আরও সহজ করতে চান তবে jQuery এর মতো একটি প্রগতিশীল জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করুন। আমি আমার কোডে কাঁচা জাভাস্ক্রিপ্টটি ব্যবহার করার একমাত্র কারণ হ'ল এটি ক্লায়েন্ট ওয়েবসাইটগুলিতে এম্বেড কোডের জন্য, সুতরাং প্রকৃত পরিবেশগুলি সাইট থেকে অন্য সাইটে আলাদা হতে পারে এবং বন্যের গ্রন্থাগারের বিরোধগুলি এড়ানোর সবচেয়ে সহজ উপায় হ'ল এটি ব্যবহার না করা।

— jmort253

1

আমি আরও একটি উদাহরণ যুক্ত করেছি যা শ্রেণীর বৈশিষ্ট্যগুলি ব্যবহার করে। এই কৌশলটি আপনার আচরণ (জাভাস্ক্রিপ্ট) এবং আপনার উপস্থাপনা (সিএসএস) থেকে আপনার সামগ্রী (এইচটিএমএল) আলাদা করার নিয়ম অনুসরণ করে। এটি স্টাইলিংয়ের আসল বিবরণটিকে ক্লাসনেম-সহ-কাজ-করার সহজ কাজ দিয়ে এড়িয়ে যায়।

— jmort253

@jmort: +1। তবে কেবল নির্ভুলতার নামে, ক্রোম / ফায়ারফক্স / সাফারি সকলেই প্রশ্নাবলীর বৈশিষ্ট্যগুলির হেরফেরকে সমর্থন করে (যেমন: এলিমেন্ট.স্টাইল.হাইট, এলিমেন্ট.স্টাইল.উইথ, ইত্যাদি)

— ড্যানিয়েল জাজো

হুঁ, আমি জানি যে আমার নিজস্ব কোডে, এটি আই 7 এর সাথে সুন্দর খেলতে পেতে, আমাকে কিছু খুব নির্দিষ্ট পদক্ষেপগুলি অনুসরণ করতে হয়েছিল যা খুব বেদনাদায়ক পরীক্ষা এবং ত্রুটির মধ্য দিয়ে আবিষ্কার হয়েছিল। এটি হতে পারে যে আই 7 সেটঅ্যাট্রিবিউটের সাথে সঠিকভাবে কাজ করবে না ... আমার ঠিক মনে নেই, তাই আমি এটি পাঠকের অনুশীলন হিসাবে ছেড়ে দেব এবং ক্রোম / এফএফ ইত্যাদির অংশটি সরিয়ে ফেলব আমি কোডটি জানি কাজ করে, এমনকি যদি আমি এটি সঠিকভাবে ব্যাখ্যা নাও করি। :)

— jmort253

14

কোনও উপাদানকে স্টাইল প্রয়োগ করার এগুলি বেশ কয়েকটি উপায়। নীচের উদাহরণগুলির মধ্যে একটি ব্যবহার করে দেখুন:

1. document.getElementById('div_register').className = 'wide';
  /* CSS */ .wide{width:500px;}
2. document.getElementById('div_register').setAttribute('class','wide');
3. document.getElementById('div_register').style.width = '500px';

— Valli69
সূত্র

1

আপনার কোডের টাইপগুলি ঠিক করুন ("ডকুমেন্ট" আপনার ফাংশনের 3 এবং 4 লাইনে ভুল বানান রয়েছে, এবং অনক্লিক ইভেন্ট হ্যান্ডলারটি পড়তে পরিবর্তন করুন: onclick = "show_update_profile ()" এবং তারপরে আপনি ভাল থাকবেন আপনার সত্যই অনুসরণ করা উচিত জেএমর্টের পরামর্শ এবং জাভাস্ক্রিপ্টের মধ্যে আপনি যে দুটি সিএসএস ক্লাস স্যুইচ করেন সেগুলি সহজভাবে স্থাপন করুন - এটি আপনার জীবনকে অনেক সহজ করে তুলবে এবং সমস্ত অতিরিক্ত টাইপিং থেকে নিজেকে বাঁচাবে আপনি যে টাইপগুলি প্রতিশ্রুতিবদ্ধ করেছেন এটি কেন আরও ভাল তার একটি নিখুঁত উদাহরণ কাছে।

ক্ষুদ্রকায় সুশীলা পরীবিশেষ পয়েন্ট জন্য, আপনি পরীক্ষা করা উচিত element.addEventListener আপনার উপাদান ইভেন্ট হ্যান্ডলার নির্ধারণের জন্য।

— ড্যানিয়েল জাজো
সূত্র

0

আপনি যদি javascript:উপসর্গটি সরিয়ে থাকেন এবং অজানা আইডির জন্য অংশগুলি 'black_fade'আপনার জাভাস্ক্রিপ্ট কোড থেকে সরিয়ে ফেলেন তবে এটি ফায়ারফক্সে কাজ করা উচিত

ঘন উদাহরণ:

<html>
    <head>
        <script type="text/javascript">
            function show_update_profile() {
               document.getElementById('div_register').style.height= "500px";
               document.getElementById('div_register').style.width= "500px";
               document.getElementById('div_register').style.display='block';
               return true;
           }
        </script>
        <style>
           /* just to show dimensions of div */
           #div_register
           {
                background-color: #cfc;
           }
        </style>
    </head>
    <body>
        <div id="main">
            <input type="button" onclick="show_update_profile();" value="show"/>
        </div>
        <div id="div_register">
            <table>
                <tr>
                   <td>
                     welcome 
                   </td>
                </tr>
            </table>
        </div>
    </body>
</html>

— powerMicha
সূত্র

"জাভাস্ক্রিপ্ট:" সরানোর বিষয়ে +1। এটি ওয়েব 1.0-এর দীর্ঘ -কালীন দিনগুলি থেকে পুরানো নির্মাণ।

— jmort253

তারপরে দয়া করে এটি আপনার উদাহরণে যুক্ত করুন, অন্যথায় স্ক্রিপ্টটি ব্যর্থ হবে - বিটিডাব্লু: আপনি Firebugফায়ারফক্সের প্লাগইনটি জানেন ? এটি আপনাকে অনেক সাহায্য করবে

— পাওয়ারমিচা

আসলে আমার স্ক্রিপ্টে কোনও ভুল ছিল না ......... কারণ আমি একটি পপ আপ বক্স ব্যবহার করছিলাম .... এটি অফটোপিক ছিল, কারণ আমার স্ক্রিপ্টটি জাভাস্ক্রিপ্ট ব্যবহার করে ভালভাবে কাজ করেছে: এটি সব ভাল কাজ করেছে, মে এটির পুরানো বিটি হোন এটি একটি ত্রুটি ছিল না ... সমস্যাটি ছিল প্রস্থের ডায়নামিক্যালি আপডেট করার সাথে ... এবং জেএমর্টের সমাধানটি সমাধানের সমাধানে আমাকে সহায়তা করেছিল

— সাসওয়াত

অবশ্যই। আমি কেবল উল্লেখ করতে চেয়েছিলাম, এই অংশগুলি উদাহরণে অনুপস্থিত ছিল, যা অন্যান্য সমস্যার দিকে পরিচালিত করে। তাই এখনই কিছুই ঠিক আছে

— পাওয়ারমিচা

-1

onclickএকটি বোতাম অ্যাট্রিবিউট জাভাস্ক্রিপ্ট একটি স্ট্রিং লাগে, একটি href না মত আপনার দেওয়া। কেবল "জাভাস্ক্রিপ্ট:" অংশটি সরান।

— jpsimons
সূত্র

-1

সাবধান span!

myspan.styles.width='100px' কাজ করতে চায় না

পরিবর্তন spanএকটি থেকে div।

— অ্যান্ডি বি
সূত্র

1

এটি হ'ল spanডিফল্ট হিসাবে একটি ইনলাইন উপাদান, এবং তাই এটির উপর কোনও আকারের সেট মানবে না। তার সিএসএস পরিবর্তন display: block, display: flexঅথবা display: inline-blockএটি সঠিকভাবে শুধু একটি মত কাজ করতে হবে div(ডিফল্ট অনুসারে একটি ব্লক উপাদান)।

— ড্যানিয়েল টি।

2

প্রশ্নটিতে কখনই স্প্যানের উল্লেখ করা হয়নি , এবং কোনও উত্তরই এর ব্যবহারের পরামর্শ দেওয়া হয়নি। এই উত্তরটি কীভাবে আদৌ সহায়তা করে তা আমি দেখছি না।

— ভিন্স বোডরেন

1

অদ্ভুত, এই এক বছর আগে ছিল তাই নিশ্চিত না কেন হয় !! ^ _ ^

— অ্যান্ডি বি

1

এবং পরিবর্তন styles.widthকরার style.width। :)

— রিজকিট