ამ სტატიაში განვიხილავთ ელემენტების კლასებთან და სტილებთან მუშაობის სხვადასხვა მეთოდს. მოდით გავეცნოთ classList-ის და style თვისებებს და მათი გამოყენების მაგალითებს გვერდზე, შესაბამისად, ელემენტების კლასებისა და სტილის სამართავად.
ელემენტის კლას(ებ)ის მართვაელემენტის კლასებთან ურთიერთქმედების პირველი გზა არის className DOM თვისების გამოყენება. ეს თვისება არის HTML კლასის ატრიბუტის ასახვა DOM-ში. DOM თვისებას className არ ერქვა კლასი იმის გამო, რომ ადრე JavaScript-ში დაცული სიტყვების გამოყენება არ შეიძლებოდა ობიექტების თვისებების დასასახელებლად. თუ არ იცით რა არის DOM თვისებები და როგორ განსხვავდებიან ისინი HTML ატრიბუტებისაგან, შეგიძლიათ მეტი გაიგოთ ამ სტატიაში.
მაგალითი, რომელშიც ჩვენ შევასრულებთ სხვადასხვა ოპერაციებს ელემენტის კლასზე DOM თვისების className გამოყენებით:
var elem = document.querySelector("#alert"); // კლასის დამატება ელემენტს elem.className = "alert"; // "alert" // ელემენტის კლასის შეცვლა elem.className = "alert-warning"; // "alert-warning" // მიიღეთ კლასის მნიშვნელობა და შეინახეთ className var classElem = elem.className; // "alert-warning" // კლასის ამოღება ელემენტიდან elem.className = ""; // ""
ელემენტის კლასთან დაკავშირებული ოპერაციების შესრულების მეორე გზა არის ატრიბუტების მანიპულირების მეთოდების გამოყენება.
მაგალითი, რომელშიც ჩვენ შევასრულებთ იგივე მოქმედებებს, როგორც ზემოთ მოცემული კოდი, მაგრამ ვიყენებთ ატრიბუტების მართვის მეთოდებს:
var elem = document.querySelector("#alert"); // კლასის დამატება ელემენტს elem.setAttribute("class", "alert"); // ელემენტის კლასის შეცვლა elem.setAttribute("class", "alert-warning"); // მიიღეთ კლასის მნიშვნელობა და შეინახეთ className var classElem = elem.getAttribute("class"); // "alert-warning" // კლასის ამოღება ელემენტიდან elem.removeAttribute("class");
className DOM თვისება და class HTML ატრიბუტი ყოველთვის სინქრონიზებულია, რაც ნიშნავს, რომ როდესაც ერთი იცვლება, მეორეც იცვლება.
მაგრამ ელემენტს შეიძლება ჰქონდეს ერთზე მეტი კლასი, მაგრამ რამდენიმე. ამ შემთხვევაში, მათთან სტრინგად მუშაობა არც თუ ისე მოსახერხებელია.
მაგალითად, ზემოაღნიშნული მეთოდების გამოყენებით ელემენტში რომელიმე კონკრეტული კლასის არსებობის დადგენა ასე მარტივად აღარ შეიძლება გაკეთდეს. ამას დასჭირდება დამატებითი კოდის დაწერა.
მაგალითი, რომელშიც ვამოწმებთ, აქვს თუ არა ელემენტს content__show კლასი:
... var elem = document.querySelector("#content"); if ((" " + elem.className + " ").indexOf(" content__show ") > -1) ( // ელემენტს აქვს content__show კლასი) else ( // ელემენტს არ აქვს content__show class)
მაგრამ ამ სიტუაციის გარდა, არის სხვა. მაგალითად, როდესაც გჭირდებათ ელემენტს ერთი კონკრეტული კლასის დამატება, ან მისი წაშლა. ამ და სხვა მოქმედებების ძალიან მარტივად შესასრულებლად, ელემენტს აქვს DOM თვისება classList, სპეციალური ამ შემთხვევებისთვის.
classList თვისებაclassList თვისება არის სპეციალური ობიექტი (DOMTokenList), რომელიც შეიცავს ელემენტის კლასებზე სხვადასხვა ოპერაციების შესრულების მეთოდებს.
classList მეთოდები:
- .add(className1[,className2,...]) - ამატებს ელემენტს ერთ ან რამდენიმე მითითებულ კლასს. თუ ელემენტს უკვე აქვს ეს კლასი, ის არ დაემატება მას.
- .remove(className1[,className2,... ]) - შლის ელემენტიდან ერთ ან რამდენიმე მითითებულ კლასს. თუ ელემენტს არ აქვს კლასი, რომლის წაშლა გსურთ, მაშინ არანაირი ქმედება არ განხორციელდება.
- .contains(className) – ამოწმებს აქვს თუ არა ელემენტს კლასი; პასუხად აბრუნებს true ან false.
- .toggle(className [,flag]) - ცვლის ელემენტის მითითებულ კლასის სახელს, ე.ი. თუ ელემენტს აქვს ეს კლასი, მაშინ შლის მას; წინააღმდეგ შემთხვევაში ამატებს. მეორე პარამეტრი (დროშა) არჩევითია. ნაგულისხმევად ის განუსაზღვრელია. თუ დააყენებთ მას true ან false-ზე, ის იმუშავებს დამატების ან წაშლის მეთოდის მსგავსად, ე.ი. ან დაამატეთ კლასი ელემენტს ან წაშალეთ მისგან.
მაგალითი, რომელიც აჩვენებს, თუ როგორ შეგიძლიათ შეასრულოთ ელემენტების კლასებთან დაკავშირებული სხვადასხვა მოქმედებები classList მეთოდების გამოყენებით:
// მიიღეთ ელემენტი id = "sidebar" var sideBar = document.querySelector("#sidebar"); // ელემენტის hidden-xs კლასის გადართვა, ე.ი. თუ ელემენტს აქვს ის, მაშინ ამოიღეთ იგი; და თუ ეს კლასი არ არსებობს, მაშინ დაამატეთ მას sideBar.classList.toogle("hidden-xs"); // დაამატეთ სამი დამატებითი კლასი sideBar element.classList.add("col-xs-6","col-sm-4","col-md-3"); // ამოიღეთ hidden-xs კლასი sideBar element.classList.remove("hidden-xs"); // შეამოწმეთ აქვს თუ არა ელემენტს hidden-lg კლასი და თუ ასეა, დაამატეთ მას სხვა hidden-md if (sideBar.classList.contains("hidden-lg") ( myID.classList.add("hidden-md" ; )
classList ობიექტი არის ფსევდომასივი, ე.ი. ის შეიძლება განმეორდეს მასივის სახით.
მაგალითი, რომელშიც გავიმეორებთ classList-ის ყველა კლასს:
... var content = document.querySelector(".content"); // ვარიანტი No1. for loop // classList.length - კლასების რაოდენობა ელემენტისთვის // classList-ის კლასების დათვლა ხდება 0-დან (var i = 0, სიგრძე = content.classList.length; i< length; i++) { // i - индекс класса в classList // выведем класс в консоль console.log(content.classList[i]); // или так (с помощью метода item) console.log(content.classList.item(i)); } // если мы хотим получить класс по его индексу, а указали в качестве значения индекса число, которое больше, чем (количества элементов - 1) в classList (т.к. отсчет ведётся с 0), то в этом случае получим в качестве результата undefined console.log(content.classList); // undefined // Вариант №2. С помощью цикла for..of for (let className of content.classList) { // выведем класс в консоль console.log(className); }
classList თვისება მხარდაჭერილია ყველა თანამედროვე ბრაუზერის მიერ. თუ გჭირდებათ ძალიან ძველი ბრაუზერების მხარდაჭერა (მაგალითად, Internet Explorer 8, 9), მაშინ ამ შემთხვევაში შეგიძლიათ გამოიყენოთ რაიმე სახის პოლიფილი.
ელემენტების სტილებიDOM-ში ყველა ელემენტს აქვს სტილის თვისება, რომლითაც შეგვიძლია მისი სტილის კონტროლი. ამ ქონების ღირებულება არის მხოლოდ წაკითხვადი ობიექტი. ელემენტისთვის სტილის დაყენება ამ შემთხვევაში ხდება მასში შესაბამისი თვისებების დამატებით.
მაგალითი იმისა, თუ როგორ შეგიძლიათ დაამატოთ სტილები ელემენტს DOM style თვისების მეშვეობით:
Square var Square = document.querySelector(".კვადრატი"); Square.style.width = "170px"; Square.style.height = "170px"; Square.backgroundColor = "მწვანე";
სტილის ობიექტის თვისებების სახელები, როგორც წესი, იგივეა, რაც CSS თვისებების სახელები. ერთადერთი გამონაკლისი არის ის CSS თვისებები, რომლებიც იყენებენ დეფისს. მაგალითად, ფონის ფერი. ამ შემთხვევაში დეფისი და მის შემდეგ ასო იცვლება დიდით. მაგალითად, CSS ფონის ფერის თვისება სტილის ობიექტისთვის იქნება მითითებული, როგორც backgroundColor. და, მაგალითად, CSS თვისება ბრაუზერის პრეფიქსით -webkit-border-radius - როგორიცაა WebkitBorderRadius.
სტილის ამოღებამაგალითად, მოდით დავაყენოთ სხეული ფონის ფერზე:
Document.body.style.backgroundColor = "#eee";
თუ ახლა გვჭირდება ამ სტილის ამოღება, მაშინ ამისათვის უბრალოდ უნდა მივცეთ მას ცარიელი სტრიქონი:
Document.body.style.backgroundColor = "";
ელემენტების სტილის დასაყენებლად DOM სტილის თვისების გამოყენების მაგალითები.
// დააყენეთ ტექსტის ფერი წითლად ელემენტისთვის id = "ინტროტექსტით" style document.querySelector("#introtext").style.color = "red"; // დააყენეთ გვერდზე ყველა p ელემენტი სტილის გამოყენებით ტექსტის ფერის მწვანეზე დასაყენებლად var paragraphs = document.querySelectorAll("p"); for (var i = 0, სიგრძე = პარაგრაფები.სიგრძე; i< length; i++) { paragraphs[i].style.backgroundColor = "green"; } // выведем в консоль все CSS свойства элемента с идентификатором "introtext" var styleElem = document.querySelector("#introtext").style; for (var i = 0, length = styleElem.length; i < length; i++) { console.log(styleElem[i]); }
cssText თვისებაელემენტისთვის სტილის ინდივიდუალურად დაყენების გარდა, ჩვენ შეგვიძლია დაუყოვნებლივ დავაყენოთ ისინი სპეციალური თვისების style.cssText გამოყენებით. ეს კეთდება ამ თვისების სტრიქონის მინიჭებით, რომელიც შედგება მძიმით გამოყოფილი სტილის ნაკრებისგან. იმათ. ეს კეთდება ისევე, როგორც ჩვენ ვაყენებთ სტილებს HTML სტილის ატრიბუტში.
მაგალითი, რომელშიც დავაყენეთ სტილები "font-size:40px; color:blue;" ელემენტები შესავალი კლასით:
//მიიღეთ ელემენტები intro კლასით var intro = document.querySelectorAll("intro"); //დააყენეთ "font-size:40px; ფერი:ლურჯი;" კრებულის ყველა ელემენტი შეიცავს შესავალს (var i = 0, სიგრძე = შესავალი.სიგრძე; i< length; i++) { intro[i].style.cssText = "font-size:40px; color:blue;"; }
ფრთხილად უნდა იყოთ სტილის დაყენებისას style.cssText თვისების გამოყენებით. ეს გამოწვეულია იმით, რომ დაყენებისას ეს თვისება შლის ყველა სტილს, რომელიც ელემენტს აქვს. იმათ. ის, რაც ჩვენ მას დავაყენეთ HTML სტილის ატრიბუტში და მის შესაბამის DOM თვისებაში.
თქვენ შეგიძლიათ შეასრულოთ ისეთი ოპერაცია, როგორიც არის style.cssText თვისება, HTML style ატრიბუტის მნიშვნელობის დაყენებით.
Მაგალითად:
//მიიღეთ პირველი ელემენტი შესავალი კლასით var info = document.querySelector("info"); //დააყენეთ იგი სტილზე "margin: 10px; padding: 10px; border: 1px solid green;" info.setAttribute("style", "ზღვარი: 10px; padding: 10px; საზღვარი: 1px მყარი მწვანე;");
Დავალებები1. დაწერეთ სკრიპტი classList-ის გამოყენებით ელემენტისთვის ტექსტის კლასის სამი კლასის მინიჭებისთვის: size-40, ფერი-წითელი და bg-ყვითელი:
.size-40 (შრიფტის ზომა: 40px; ) .color-red (ფერი: წითელი;) .bg-ყვითელი (ფონი: ყვითელი; )
რაღაც ტექსტი...
2. დაწერეთ კოდი სტილის დასაყენებლად "width: 180px; height: 180px;" გვერდის ყველა ელემენტი კლასით, რომელიც იწყება სიტყვებით block- .
თავსებადობა JavaScript-სა და CSS-ს შორის
Cascading Style Sheets (CSS) არის HTML დოკუმენტების ვიზუალური პრეზენტაციის სტანდარტი. კასკადური სტილის ფურცლები შექმნილია დიზაინერების გამოსაყენებლად: ისინი საშუალებას გაძლევთ ზუსტად განსაზღვროთ შრიფტები, ფერები, მინდვრები, გასწორება, საზღვრების ვარიანტები და თუნდაც ელემენტების კოორდინატები დოკუმენტში.
მაგრამ ისინი ასევე აინტერესებთ პროგრამისტებს, რომლებიც წერენ კლიენტის მხარეს JavaScript-ში, რადგან ისინი აძლევენ საშუალებას ანიმაციური ეფექტები, როგორიცაა დოკუმენტის შიგთავსის გაქრობა მარჯვენა კიდიდან, ან სიების დაშლა და გაფართოება, რაც მომხმარებელს საშუალებას აძლევს გააკონტროლოს შინაარსის ჩვენება. ინფორმაცია.
Inline Styles-ის მართვაCSS სტილის კონტროლის უმარტივესი გზაა ინდივიდუალური დოკუმენტის ელემენტების სტილის ატრიბუტის მანიპულირება. HTML ატრიბუტების უმეტესობის მსგავსად, style ატრიბუტი შეესაბამება Element ობიექტზე ამავე სახელწოდების თვისებას და მისი მანიპულირება შესაძლებელია JavaScript სკრიპტებში. თუმცა, style თვისებას აქვს ერთი გამორჩეული თვისება: მისი მნიშვნელობა არის არა სტრიქონი, არამედ CSSStyleDeclaration ობიექტი. ამ ობიექტის თვისებები წარმოადგენს HTML სტილის ატრიბუტში განსაზღვრულ CSS თვისებებს.
მაგალითად, ტექსტის e ელემენტის შინაარსის დიდი, თამამი, ლურჯი შრიფტით საჩვენებლად, შეგიძლიათ გააკეთოთ შემდეგი, რომ დაწეროთ სასურველი მნიშვნელობები იმ თვისებებზე, რომლებიც შეესაბამება შრიფტის ზომას, შრიფტის წონას და ფერის სტილს. თვისებები:
E.style.fontSize = "24px"; e.style.fontWeight = "თამამი"; e.style.color = "ლურჯი";
CSSStyleDeclaration ობიექტის სტილის თვისებებთან მუშაობისას გახსოვდეთ, რომ ყველა მნიშვნელობა უნდა იყოს მითითებული, როგორც სტრიქონები. სტილის ფურცელში ან სტილის ატრიბუტში შეგიძლიათ დაწეროთ:
პოზიცია: აბსოლუტური; font-family: sans-serif; ფონის ფერი: #ffffff;
იგივე რომ გააკეთოთ JavaScript-ში e ელემენტისთვის, თქვენ უნდა ჩართოთ ყველა მნიშვნელობა ბრჭყალებში:
E.style.position = "აბსოლუტური"; e.style.fontFamily = "sans-serif"; e.style.backgroundColor = "#ffffff";
გაითვალისწინეთ, რომ წერტილები არ შედის სტრიქონების მნიშვნელობებში. ეს არის მძიმით, რომელიც გამოიყენება JavaScript სინტაქსში. CSS სტილის ფურცლებში გამოყენებული წერტილები არ არის საჭირო JavaScript-ის გამოყენებით სტრიქონების მნიშვნელობებში.
ასევე, გახსოვდეთ, რომ პოზიციონირების ყველა თვისება უნდა შეიცავდეს გაზომვის ერთეულებს. ანუ:
E.style.left = 300; // არასწორი: ეს არის რიცხვი და არა სტრიქონი e.style.left = "300"; // არასწორია: აკლია ერთეულები e.style.left = "300px"; // მარჯვენა
ერთეულები საჭიროა JavaScript-ში სტილის თვისებების დაყენებისას - იგივე, რაც სტილის თვისებების დაყენებისას სტილის ფურცლებში.
CSS სტილის მრავალი თვისება, როგორიცაა შრიფტის ზომა, შეიცავს დეფისს მათ სახელებში. JavaScript განმარტავს დეფისს, როგორც მინუს ნიშანს, ამიტომ შემდეგი გამონათქვამი არ შეიძლება დაიწეროს:
E.style.font-size = "24px"; // Სინტაქსური შეცდომა!
ამრიგად, CSSStyleDeclaration ობიექტის თვისებების სახელები ოდნავ განსხვავდება რეალური CSS თვისებების სახელებისგან. თუ CSS თვისების სახელი შეიცავს დეფისებს, CSSStyleDeclaration ობიექტის საკუთრების სახელი იქმნება დეფისების ამოღებით და თითოეულის შემდეგ ასოს დიდი ასოებით. სხვა სიტყვებით რომ ვთქვათ, border-left-width CSS თვისებაზე წვდომა ხდება borderLeftWidth თვისებით, ხოლო font-family CSS თვისებაზე წვდომა შესაძლებელია fontFamily თვისებით.
გარდა ამისა, როდესაც CSS თვისებას, როგორიცაა float, აქვს სახელი, რომელიც ემთხვევა JavaScript-ის რეზერვირებულ სიტყვას, სახელს პრეფიქსი აქვს „css“, რათა შეიქმნას CSSStyleDeclaration ობიექტის საკუთრების სწორი სახელი. ანუ ელემენტის CSS float თვისების წასაკითხად ან შესაცვლელად, თქვენ უნდა გამოიყენოთ CSSStyleDeclaration ობიექტის cssFloat თვისება.
HTML ელემენტის სტილის ატრიბუტი არის მისი ჩასმული სტილი და ის არღვევს სტილის ნებისმიერ წესს CSS ფურცელში. Inline სტილები ზოგადად მოსახერხებელია სტილის მნიშვნელობების დასაყენებლად და ეს არის მიდგომა, რომელიც გამოიყენება ყველა ზემოთ მოცემულ მაგალითში. სკრიპტებს შეუძლიათ წაიკითხონ CSSStyleDeclaration ობიექტის თვისებები, რომელიც წარმოადგენს inline სტილებს, მაგრამ ისინი აბრუნებენ მნიშვნელოვან მნიშვნელობებს მხოლოდ იმ შემთხვევაში, თუ ისინი ადრე იყო მითითებული JavaScript სკრიპტით ან თუ HTML ელემენტს აქვს inline style ატრიბუტი, რომელიც ადგენს სასურველ თვისებებს.
მაგალითად, დოკუმენტი შეიძლება შეიცავდეს სტილის ფურცელს, რომელიც ადგენს მარცხენა ზღვარს ყველა აბზაცისთვის 30 პიქსელზე, მაგრამ ამ ელემენტის მარცხენაMargin თვისების წაკითხვა ცარიელ ხაზს დააბრუნებს, თუ ამ აბზაცს არ აქვს სტილის ატრიბუტი, რომელიც აჭარბებს დადგენილ მნიშვნელობას. სტილის ფურცელი.
ელემენტის inline სტილის კითხვა განსაკუთრებით რთულია სტილის თვისებების წაკითხვისას, რომლებსაც აქვთ ერთეულები და სტენოგრამის აღნიშვნის თვისებები: სკრიპტი უნდა შეიცავდეს CSS სტილის სტრიქონების დახვეწილ განხორციელებას, რათა მოხდეს მნიშვნელობების ამოღება და გამოყენება. ზოგადად, inline ელემენტის სტილი მოსახერხებელია გამოსაყენებლად მხოლოდ სტილის დასაყენებლად.
ზოგჯერ უფრო ადვილია ერთი სტრიქონის წაკითხვა ან ჩაწერა ელემენტის inline სტილში, ვიდრე CSSStyleDeclaration ობიექტზე წვდომა. ამისათვის შეგიძლიათ გამოიყენოთ Element ობიექტის getAttribute() და setAttribute() მეთოდები ან CSSStyleDeclaration ობიექტის cssText თვისება:
// ქვემოთ მოცემული ორივე განცხადება აყენებს e ელემენტის style ატრიბუტს // ს სტრიქონს: e.setAttribute("style", s); e.style.cssText = s; // ქვემოთ მოცემული ორივე წინადადება იღებს e ელემენტის style ატრიბუტის მნიშვნელობას // სტრიქონის სახით: s = e.getAttribute("style"); s = e.style.cssText;
ანიმაციური ეფექტების შექმნა CSS-ის გამოყენებითCSS-ის ერთ-ერთი ყველაზე გავრცელებული გამოყენებაა ვიზუალური ანიმაციის ეფექტების გაფორმება. მათი დანერგვა შეგიძლიათ setTimeout() ან setInterval() მეთოდების გამოყენებით, მათი გამოყენება ფუნქციის მრავალი ზარის ორგანიზებისთვის, რომელიც ცვლის ელემენტის შიდა სტილს.
// აქცევს ელემენტს e-ს შედარებით პოზიციონირებადს და მოძრაობს მარცხნივ და მარჯვნივ. // პირველი არგუმენტი შეიძლება იყოს ელემენტის ობიექტი ან // სასურველი ელემენტის id ატრიბუტის მნიშვნელობა. თუ ფუნქციას მეორე არგუმენტად გადასცემთ, ის გამოიძახება e //-ით, როგორც არგუმენტი, როდესაც ანიმაცია დაასრულებს დაკვრას. მესამე არგუმენტი განსაზღვრავს // ელემენტის ოფსეტური მნიშვნელობას e. ნაგულისხმევი 5 პიქსელი. // მეოთხე არგუმენტი განსაზღვრავს რამდენ ხანს უნდა ითამაშოს ეფექტი. // ნაგულისხმევად ეფექტი გრძელდება 500 ms. ფუნქცია shake(e, დასრულებული, მანძილი, დრო) ( // არგუმენტების დამუშავება if (ტიპი e === "სტრიქონი") e = document.getElementByld(e); თუ (!დრო) დრო = 500; თუ (!დისტანცია) მანძილი = 5 var originalStyle = e.style.cssText // შეინახეთ ორიგინალური სტილი = "ნათესავი" // გახადეთ ნათესავი. დაიმახსოვრე ანიმაციის დაწყება // ანიმაციის დაწყება // ეს ფუნქცია ამოწმებს გასულ დროს და ცვლის e-ს კოორდინატებს // თუ დროა დასრულდეს ანიმაცია, ის აღადგენს //-ის საწყის მდგომარეობას წინააღმდეგ შემთხვევაში, ის ცვლის e-ს კოორდინატებს და გეგმავს მის შემდეგ ზარს animate() (var now = (new Date()).getTime(); / რამდენი დრო გავიდა დაწყების დღიდან = გასული // საჭირო დროის ფრაქცია?
ორივე shake() და fadeOut() იღებენ არჩევით გამოძახების ფუნქციას მეორე არგუმენტად. თუ ეს ფუნქცია მითითებულია, ის გამოიძახება, როდესაც ანიმაციური ეფექტი დასრულდება. ელემენტი, რომელზეც გამოყენებული იყო ანიმაციის ეფექტი, გადაეცემა გამოძახების ფუნქციას, როგორც არგუმენტი. შემდეგი HTML მარკირება ქმნის ღილაკს, რომელიც დაწკაპუნებისას წარმოქმნის შერყევის ეფექტს და შემდეგ დაშლის ეფექტს:
Დამაკლიკე!
დააკვირდით, რამდენად ჰგავს shake() და fadeOut() ფუნქციები ერთმანეთს. ორივე შეიძლება იყოს შაბლონები მსგავსი ანიმაციური ეფექტების განსახორციელებლად CSS თვისებების გამოყენებით.
გამოთვლილი სტილებიელემენტის სტილის თვისება განსაზღვრავს ელემენტის inline სტილს. მას აქვს უპირატესობა ყველა სტილის ფურცელთან შედარებით და მისი წარმატებით გამოყენება შესაძლებელია CSS თვისებების დასაყენებლად ელემენტის ვიზუალური გარეგნობის შესაცვლელად. თუმცა, ზოგადად, აზრი არ აქვს მას დავარქვათ, როდესაც გსურთ იცოდეთ ელემენტზე გამოყენებული ფაქტობრივი სტილი. ის, რაც ამ შემთხვევაში საჭიროა, ეწოდება გამოთვლილ სტილს.
ელემენტის გამოთვლილი სტილი არის საკუთრების მნიშვნელობების ერთობლიობა, რომელიც ბრაუზერმა მიიღო (ან გამოითვალა) inline სტილიდან და ყველა წესი ყველა სტილის ფურცლიდან, რომელიც ვრცელდება ელემენტზე: ეს არის თვისებების ერთობლიობა, რომელიც რეალურად გამოიყენება რენდერის დროს. ელემენტი. Inline სტილის მსგავსად, გამოთვლილი სტილები წარმოდგენილია CSSStyleDeclaration ობიექტით. თუმცა, შიდა სტილისგან განსხვავებით, გამოთვლილი სტილები მხოლოდ წაკითხვადია. ამ სტილების შეცვლა შეუძლებელია, მაგრამ გამოთვლილი CSSStyleDeclaration ობიექტი საშუალებას გაძლევთ ზუსტად იცოდეთ სტილის თვისებების მნიშვნელობები, რომლებიც ბრაუზერმა გამოიყენა შესაბამისი ელემენტის გადაცემისას.
თქვენ შეგიძლიათ მიიღოთ ელემენტის გამოთვლილი სტილი Window ობიექტის getComputedStyle() მეთოდის გამოყენებით. ამ მეთოდის პირველი არგუმენტი არის ელემენტი, რომლის გამოთვლილი სტილი გსურთ დააბრუნოთ. მეორე არგუმენტი საჭიროა და ჩვეულებრივ გადის null ან ცარიელი სტრიქონი, მაგრამ მას ასევე შეუძლია გადასცეს სტრიქონი CSS ფსევდო ელემენტის სახელით, როგორიცაა ":: ადრე", ":: შემდეგ", ":first-line" ან " :პირველი წერილი":
Var title = document.getElementById("section1title"); var titlestyles = window.getComputedStyle(ელემენტი, null);
getComputedStyle() მეთოდის დაბრუნებული მნიშვნელობა არის CSSStyleDeclaration ობიექტი, რომელიც წარმოადგენს ყველა სტილს, რომელიც გამოიყენება მითითებულ ელემენტზე (ან ფსევდო ელემენტზე). ბევრი მნიშვნელოვანი განსხვავებაა CSSStyleDeclaration ობიექტებს შორის, რომლებიც წარმოადგენენ inline სტილებს და გამოთვლილ სტილებს:
გამოთვლილი სტილის თვისებები მხოლოდ წაკითხვადია.
გამოთვლილ სტილის თვისებებს აქვს აბსოლუტური მნიშვნელობები: საზომის ფარდობითი ერთეულები, როგორიცაა პროცენტები და ქულები, გარდაიქმნება აბსოლუტურ მნიშვნელობებად. ნებისმიერ თვისებას, რომელიც განსაზღვრავს ზომას (როგორიცაა მინდვრის სიგანე ან შრიფტის ზომა) ექნება მნიშვნელობა გამოხატული პიქსელებით. ანუ, მისი მნიშვნელობა იქნება სტრიქონი სუფიქსით "px", ამიტომ მოგიწევთ მისი გარჩევა, მაგრამ არ მოგიწევთ ფიქრი ერთეულების განსაზღვრასა და კონვერტაციაზე. თვისებების მნიშვნელობები, რომლებიც განსაზღვრავს ფერს, დაბრუნდება ფორმატში "rgb(#,#,#)" ან "rgba(#,#,#,#)".
თვისებები, რომლებიც წარმოადგენს სტენოგრამის აღნიშვნას, არ ფასდება - მხოლოდ ფუნდამენტური თვისებები, რომლებზეც ისინი დაფუძნებულია. მაგალითად, თქვენ არ უნდა შეეცადოთ მიიღოთ margin თვისება, არამედ შედით თვისებები marginLeft, marginTop და ა.შ.
გამოთვლილი სტილის cssText თვისება არ არის განსაზღვრული.
გამოთვლილ სტილებთან მუშაობა შეიძლება საკმაოდ რთული იყოს და მათზე წვდომა შეიძლება ყოველთვის არ დააბრუნოს თქვენთვის სასურველი ინფორმაცია. განვიხილოთ font-family თვისება, როგორც მაგალითი: იგი იღებს მძიმით გამოყოფილ სიას შრიფტის ოჯახის სახელების თავსებადობისთვის. როდესაც კითხულობთ გამოთვლილი სტილის fontFamily თვისებას, თქვენ ელოდებით ელემენტზე გამოყენებული ყველაზე სპეციფიკური შრიფტის ოჯახის სტილის მნიშვნელობას. და ამ შემთხვევაში, შეიძლება დაბრუნდეს ისეთი მნიშვნელობა, როგორიცაა "arial, helvetica, sans-serif", რომელიც არაფერს ამბობს გამოყენებული ფაქტობრივი შრიფტის შრიფტის შესახებ.
Style Sheets-ის მართვააქამდე ჩვენ ვნახეთ, როგორ დავაყენოთ და მივიღოთ CSS სტილის თვისებების მნიშვნელობები და ინდივიდუალური ელემენტების კლასები. თუმცა, ასევე არსებობს თავად CSS სტილის ფურცლების მანიპულირების შესაძლებლობა. ეს ჩვეულებრივ არ არის საჭირო, მაგრამ ზოგჯერ შეიძლება სასარგებლო იყოს და ამ განყოფილებაში მოკლედ იქნება აღწერილი შესაძლო ტექნიკა.
თავად სტილის ფურცლებთან მუშაობისას, თქვენ შეხვდებით ორი ტიპის ობიექტს. პირველი ტიპი არის Element ობიექტები, რომლებიც წარმოადგენს ელემენტებს და რომლებიც შეიცავს ან მიმართავს სტილის ფურცლებს. ეს არის ჩვეულებრივი დოკუმენტის ელემენტები და თუ მათზე განსაზღვრავთ id ატრიბუტს, შეგიძლიათ აირჩიოთ ისინი document.getElementById() მეთოდის გამოყენებით.
მეორე ტიპის ობიექტი არის CSSStyleSheet ობიექტები, რომლებიც წარმოადგენენ თავად სტილის ფურცლებს. document.styleSheets თვისება აბრუნებს მხოლოდ წასაკითხად მასივის მსგავს ობიექტს, რომელიც შეიცავს CSSStyleSheet ობიექტებს, რომლებიც წარმოადგენს დოკუმენტის სტილის ფურცლებს. თუ თქვენ განსაზღვრავთ სათაურის ატრიბუტს ან ელემენტზე, რომელიც განსაზღვრავს ან მიუთითებს სტილის ფურცელზე, ეს ობიექტი ხელმისაწვდომი იქნება, როგორც CSSStyleSheet ობიექტის თვისება სათაურის ატრიბუტში მითითებული სახელით.
შემდეგი სექციები აღწერს, თუ რა ოპერაციები შეიძლება შესრულდეს ამ ელემენტებზე და სტილის ობიექტებზე.
სტილის ფურცლების ჩართვა ან გამორთვასტილის ფურცლებთან მუშაობის უმარტივესი ტექნიკა ასევე ყველაზე პორტატული და საიმედოა. ელემენტები და CSSStyleSheet ობიექტები განსაზღვრავენ გათიშულ თვისებას, რომლის წაკითხვა და დაწერა შესაძლებელია JavaScript სკრიპტებით. როგორც მისი სახელი გვთავაზობს, თუ გამორთული თვისება დაყენებულია true-ზე, სტილის ცხრილი გამორთულია და ბრაუზერის მიერ იგნორირებული იქნება.
ეს ნათლად ჩანს ქვემოთ მოცემული disableStylesheet() ფუნქციით. თუ მას რიცხვს მისცემთ, ის ინტერპრეტირებს მას, როგორც ინდექსს document.styleSheets მასივში. თუ მას გადასცემთ სტრიქონს, ის განმარტავს მას, როგორც CSS სელექტორს, გადასცემს დოკუმენტს document.querySelectorAll() მეთოდზე და დააყენებს ყველა მიღებული ელემენტის გამორთული თვისებას true:
ფუნქცია disableStylesheet(ss) ( if (typeof ss === "number") document.styleSheets.disabled = true; else ( var sheets = document.querySelectorAll(ss); for(var i = 0; i
წესების მიღება, ჩასმა და ამოღება სტილის ფურცლებიდანსტილის ფურცლების ჩართვის ან გამორთვის შესაძლებლობის გარდა, CSSStyleSheet ობიექტი ასევე განსაზღვრავს API-ს სტილის წესების მოძიების, ჩასმისა და ამოღების მიზნით. IE8 და ადრინდელი ვერსიები ახორციელებენ ოდნავ განსხვავებულ API-ს, ვიდრე სხვა ბრაუზერების მიერ დანერგილი სტანდარტული.
ზოგადად, სტილის ფურცლების პირდაპირ მანიპულირება იშვიათად არის გამოსადეგი. სტილის ფურცლებზე ახალი წესების დამატების ნაცვლად, ჩვეულებრივ ჯობია დატოვოთ ისინი სტატიკური და იმუშაოთ ელემენტის className თვისებასთან. თუმცა, თუ გსურთ მომხმარებელს მისცეთ სრული კონტროლი თქვენი ვებ გვერდის სტილის ფურცლებზე, შეგიძლიათ განახორციელოთ სტილის ფურცლების დინამიური მანიპულირება.
CSSStyleSheet ობიექტები ინახება document.styleSheets მასივში. CSSStyle Sheet ობიექტს აქვს cssRules თვისება, რომელიც ინახავს სტილის წესების მასივს:
Var firstRule = document.styleSheets.cssRules;
IE-ში ამ თვისებას წესები ეწოდება და არა cssRules.
cssRules ან წესების მასივის ელემენტები არის CSSRule ობიექტები. სტანდარტულ API-ში, CSSRule ობიექტს შეუძლია წარმოადგინოს ნებისმიერი ტიპის CSS წესი, მათ შორის @rules, როგორიცაა @import და @page დირექტივები. თუმცა, IE-ში წესების მასივი შეიძლება შეიცავდეს მხოლოდ ფაქტობრივ სტილის წესებს.
CSSRule ობიექტს აქვს ორი თვისება, რომელთა გამოყენება შესაძლებელია პორტატული გზით. (სტანდარტულ API-ში, არასტილის წესებს არ აქვთ ეს თვისებები, ამიტომ შეიძლება დაგჭირდეთ მათი გამოტოვება სტილის ფურცლის გავლისას.) SelectorText თვისება არის CSS ამრჩეველი წესისთვის, ხოლო style თვისება არის მითითება ჩასაწერი CSSStyleDeclaration ობიექტი, რომელიც აღწერს ამ სელექტორთან დაკავშირებულ სტილებს. შეგახსენებთ, CSSStyleDeclaration არის იგივე ტიპი, რომელიც გამოიყენება შიდა და გამოთვლილი სტილის წარმოსაჩენად.
CSSStyleDeclaration ობიექტის გამოყენება შესაძლებელია არსებული ან ახალი სტილის წესებში წასაკითხად. ხშირად, სტილის ფურცლის გავლისას, ინტერესს იწვევს თავად წესის ტექსტი და არა მისი გაანალიზებული წარმოდგენა. ამ შემთხვევაში, შეგიძლიათ გამოიყენოთ CSSStyleDeclaration ობიექტის cssText თვისება, რომელიც შეიცავს წესებს ტექსტის გამოსახულებაში.
სტილის ფურცლის არსებული წესების აღდგენისა და შეცვლის შესაძლებლობის გარდა, თქვენ გაქვთ შესაძლებლობა დაამატოთ წესები და წაშალოთ წესები სტილის ცხრილიდან. სტანდარტული აპლიკაციის ინტერფეისი განსაზღვრავს insertRule() და deleteRule() მეთოდებს, რომლებიც საშუალებას გაძლევთ დაამატოთ და წაშალოთ წესები:
Document.styleSheets.insertRule("H1 ( text-weight: bold; )", 0);
IE ბრაუზერი არ უჭერს მხარს insertRule() და deleteRule() მეთოდებს, მაგრამ განსაზღვრავს addRule() და removeRule() ფუნქციებს, რომლებიც თითქმის მათ ექვივალენტურია. ერთადერთი მნიშვნელოვანი განსხვავება (გარდა ფუნქციების სახელებისა) არის ის, რომ addRule() ელის, რომ მიიღებს სელექტორს და სტილს, როგორც ტექსტს ორ ცალკეულ არგუმენტში.
ახალი სტილის ფურცლების შექმნასაბოლოოდ, შეგიძლიათ შექმნათ სრულიად ახალი სტილის ფურცლები და დაამატოთ ისინი თქვენს დოკუმენტში. ბრაუზერების უმეტესობაში ეს ოპერაცია ხორციელდება DOM-ში დანერგილი სტანდარტული ტექნიკის გამოყენებით: იქმნება ახალი ელემენტი და ჩასმულია დოკუმენტში სექციაში, შემდეგ სტილის ფურცლის შიგთავსი ემატება innerHTML თვისების გამოყენებით. თუმცა, IE8 და უფრო ადრეულ ვერსიებში, ახალი CSSStyleSheet ობიექტი უნდა შეიქმნას არასტანდარტული მეთოდის გამოყენებით. document.createStyleSheet()და დაამატეთ სტილის ფურცლის ტექსტი cssText თვისების გამოყენებით.
ქვემოთ მოყვანილი მაგალითი გვიჩვენებს ახალი ცხრილების შექმნას:
// ამატებს სტილის ფურცელს დოკუმენტს და ავსებს მას მითითებული სტილებით. // სტილის არგუმენტი შეიძლება იყოს სტრიქონი ან ობიექტი. თუ ეს არის სტრიქონი, // ის ინტერპრეტირებულია, როგორც სტილის ტექსტი. თუ ეს არის ობიექტი, მაშინ მისი ყოველი // თვისება უნდა განსაზღვროს სტილის წესი, რომელიც დაემატება ცხრილში. // თვისებების სახელები არის სელექტორები და მათი მნიშვნელობები არის შესაბამისი სტილის ფუნქცია addStylesheet(styles) ( // ჯერ თქვენ უნდა შექმნათ ახალი სტილის ფურცელი var styleElt, styleSheet; if (document.createStyleSheet) ( //If IE API არის განსაზღვრული, გამოიყენეთ styleSheet = document .createStyleSheet( ) else ( var head = document.getElementsByTagName("head"); styleElt = document.createElement("style"); // ახალი ელემენტი head.appendChild(styleElt); ); სტილის ფურცლის ტექსტის განსაზღვრა if (styleElt) styleElt.innerHTML = styles else styleSheet .cssText = styles (// IE API ) else ( // არგუმენტირებული ობიექტის ჩასმის წესებით var i = 0; for(selector in styles) (; if (styleSheet.insertRule) ( var წესი = ამომრჩევი + " (" + სტილები + ")"; styleSheet.insertRule(წესი, i++); else (styleSheet.addRule(სელექტორი, სტილები, i++); )))))
ბოლო განახლება: 11/1/2015
JavaScript-ში ელემენტის სტილის თვისებებთან მუშაობის ძირითადად ორი მიდგომა არსებობს:
სტილის თვისების შეცვლა
კლასის ატრიბუტის მნიშვნელობის შეცვლა
სტილის თვისება წარმოადგენს კომპლექსურ სტილის საკონტროლო ობიექტს და პირდაპირ ასახავს html ელემენტის სტილის ატრიბუტს. ეს ობიექტი შეიცავს CSS თვისებების კომპლექტს: element.style.CSS თვისება. მაგალითად, დავაყენოთ შრიფტის ფერი:
Var root = document.documentElement; // სტილის დაყენება root.style.color = "ლურჯი"; // მიიღეთ სტილის მნიშვნელობა document.write(root.style.color); //ლურჯი
ამ შემთხვევაში, ფერის თვისების სახელი იგივეა, რაც css თვისება. ანალოგიურად, ჩვენ შეგვიძლია დავაყენოთ ფერი css-ის გამოყენებით:
Html (ფერი: ლურჯი;)
თუმცა, რამდენიმე css თვისებას აქვს დეფისი მათ სახელებში, მაგალითად, font-family . JavaScript არ იყენებს დეფისს ამ თვისებებისთვის. დეფისის შემდეგ მხოლოდ პირველი ასო გარდაიქმნება დიდზე:
Var root = document.documentElement; root.style.fontFamily = "ვერდანა";
className თვისებაclassName თვისების გამოყენებით, შეგიძლიათ დააყენოთ html ელემენტის კლასის ატრიბუტი. Მაგალითად:
.blueStyle( ფერი:ლურჯი; font-family:Verdana; ) .article( font-size:20px; ) სტატიის სათაური
პირველი აბზაცი
მეორე აბზაცი
var articleDiv = document.querySelector("div.article"); // ახალი კლასის დაყენება articleDiv.className = "blueStyle"; // მიიღეთ კლასის სახელი document.write(articleDiv.className);კლასების გამოყენებით, თქვენ არ გჭირდებათ თითოეული css თვისების კონფიგურაცია style თვისების გამოყენებით.
მაგრამ გასათვალისწინებელია, რომ კლასის ატრიბუტის წინა მნიშვნელობა წაშლილია. ამიტომ, თუ კლასის დამატება გვჭირდება, მისი სახელი უნდა გავაერთიანოთ ძველ კლასთან:
ArticleDiv.className = articleDiv.className + "blueStyle";
და თუ თქვენ გჭირდებათ მთლიანად წაშალოთ ყველა კლასი, შეგიძლიათ მიანიჭოთ ცარიელი სტრიქონი თვისებას:
ArticleDiv.className = "";
classList თვისებაზემოთ განვიხილეთ, თუ როგორ დავამატოთ კლასები ელემენტს, მაგრამ მრავალი კლასის მართვისთვის ბევრად უფრო მოსახერხებელია classList თვისების გამოყენება. ეს თვისება წარმოადგენს ობიექტს, რომელიც ახორციელებს შემდეგ მეთოდებს:
add(className): ამატებს კლასის className-ს
remove(className): შლის კლასის className
toggle(className): ცვლის ელემენტის კლასს className-ზე. თუ კლასი არ არის, მაშინ ემატება, თუ არის, მაშინ იშლება
Მაგალითად:
Var articleDiv = document.querySelector("div.article"); // კლასის წაშლა articleDiv.classList.remove("სტატია"); // დაამატეთ კლასი articleDiv.classList.add("blueStyle"); // კლასის გადართვა articleDiv.classList.toggle("სტატია");
JavaScript-ის გამოყენებით, თქვენ შეგიძლიათ მარტივად მანიპულიროთ HTML გვერდზე კვანძების ყველა მახასიათებლით. მაგრამ, როგორც წესი, JavaScript-ის გამოყენებით კვანძების მახასიათებლების „ხელით“ შეცვლა ძალიან შრომატევადი სამუშაოა და მოითხოვს პროგრამისტს იცოდეს HTML და CSS სირთულეები.
CSS-ის შესაძლებლობები საშუალებას იძლევა ამ ამოცანის უმეტესი ნაწილი გადავიდეს განლაგების დიზაინერზე და პროგრამისტს მოუწევს მხოლოდ ამ კვანძების მდგომარეობების მანიპულირების განხორციელება. პრობლემის გადაჭრის ეს მიდგომა საშუალებას გაძლევთ გვერდი აუაროთ ხარვეზების უმეტესობას და გადაჭრათ მრავალი პრობლემა დიდი სირთულის გარეშე.
უმარტივესი მაგალითია გვერდზე ბლოკის დამალვა/ჩვენება JavaScript-ის გამოყენებით. ეს ჩვეულებრივ კეთდება ასე:
ტექსტის მაგალითი. ტექსტის მაგალითი.
ვნახოთ რა მოხდა.
აქ ყველაფერი მშვენივრად მუშაობს და საჩივრის არაფერია. ავიღოთ კიდევ ერთი მაგალითი:
დედამ ჩარჩო გარეცხა. შვილს უყვარს მამა.
ვთქვათ, ღილაკზე „აჩვენე მთელი სიმართლე“ დაწკაპუნებით უნდა დავმალოთ span#lie კვანძი (span tag იდენტიფიკატორის სიცრუით). და როდესაც დააწკაპუნებთ ღილაკზე „დაბრუნება, როგორც იყო“, კვლავ აჩვენეთ ეს კვანძი. შევეცადოთ გამოვიყენოთ იგივე ფუნქციონირება ამ ამოცანის განსახორციელებლად:
ფუნქცია hide(nodeId) ( var node = document.getElementById(nodeId); if (node) ( node.style.display = "none"; ) ) ფუნქცია show(nodeId) ( var node = document.getElementById(nodeId); თუ (კვანძი) ( node.style.display = "ბლოკი"; ) )
დედამ ჩარჩო გარეცხა. შვილს უყვარს მამა.
მოდით შევამოწმოთ მუშაობის შედეგი მოქმედებაში.
როგორც მაგალითიდან ჩანს, ღილაკი "აჩვენე მთელი სიმართლე" ასრულებს თავის დავალებას, როგორც სასურველია. მაგრამ როდესაც დააჭირეთ ღილაკს "დაბრუნება ისე, როგორც იყო", ტექსტი კვლავ გამოჩნდება, მაგრამ გარკვეული დამახინჯებით - ჩნდება სრულიად არასაჭირო ხაზის წყვეტები.
Რა არის მიზეზი? ვინც ცოტა CSS იცის, დიდი ხანია მიხვდა, სად მივდივარ. საქმე ის არის, რომ თუ რომელიმე კვანძის ჩვენების თვისება დაყენებულია ბლოკად, მაშინ კვანძი ხდება ბლოკის ელემენტი, რომელიც სტანდარტულად იკავებს სიგანის 100%-ს. ჩვენს შემთხვევაში აუცილებელია მნიშვნელობის inline დაყენება და არა დაბლოკვა. და რატომ სჭირდება პროგრამისტს ასეთი დახვეწილობის ცოდნა? ამ შემთხვევაში საერთოდ არ არის საჭირო.
შეგიძლიათ სხვა გზით წახვიდეთ - მაგალითად, შეცვალეთ დამალვის ფუნქციის კოდი შუალედურ ცვლადში ორიგინალური მნიშვნელობის შენახვის დამატებით. მაგრამ არსებობს უკეთესი გზა.
მოდით გადავაქციოთ CSS-ის ძალა ჩვენს სასარგებლოდ. მოდით შევქმნათ დამალული სპეციალური CSS კლასი, რომელშიც დავაყენებთ ჩვენთვის საჭირო თვისებებს. ახლა რჩება მხოლოდ ამ კლასის მინიჭება სასურველ კვანძზე და ის გაქრება ეკრანიდან. ამ კლასის მოხსნის შემდეგ ის უპრობლემოდ უბრუნდება სამსახურს.
.hidden (ჩვენება: არცერთი;) ფუნქცია hide(nodeId) ( var node = document.getElementById(nodeId); if (node) ( node.className = "დამალული"; ) ) ფუნქცია show(nodeId) ( var node = დოკუმენტი. getElementById(nodeId if (კვანძი) ( node.className = ""; ) )
დედამ ჩარჩო გარეცხა. შვილს უყვარს მამა.
ახლა მაგალითი მუშაობს ისე, როგორც უნდა.
თუმცა, რჩება კიდევ ერთი პრობლემა - არ არის გათვალისწინებული შემთხვევა, როდესაც კვანძს უკვე აქვს გარკვეული კლასი. შეეცადეთ თავად მოაგვაროთ ეს პრობლემა.
ზოგადად, ეს მიდგომა შეიძლება დახასიათდეს შემდეგნაირად: უნდა ეცადოს მანიპულირება არა კვანძების მახასიათებლებით, არამედ მათი მდგომარეობებით. ამა თუ იმ კლასის არსებობა კვანძში სწორედ ის მდგომარეობაა. იმის გათვალისწინებით, რომ კვანძი შეიძლება შეიცავდეს რამდენიმე კლასს, საკმაოდ რთული მანიპულაციებიც კი შეიძლება შემცირდეს მდგომარეობის გადართვის მარტივ სქემამდე. და შემდეგ სთხოვეთ განლაგების დიზაინერს მოამზადოს სპეციალური წესები ამ მდგომარეობებისთვის სტილის ფურცელში.
და რას ამბობენ, ეს ხმები. ერთი და. იგივე: მე ვარ გამყიდველი, მე ვარ გამყიდველი. Რას იზავ. Რა შეგიძლია.
დიახ, ჰიდრა ხახვი რუსეთში 2016 წელს. და ეს ნიშნავს, რომ ბულ გეითსი არ ამყარებს კონტაქტს. არ მუშაობს. ან იქნებ ის მოდის. მაგრამ შენ არ გესმის. შესაძლოა, მინოტავრი არის ის მკვდარი ვირთხა ჭერზე. . შეიძლება ასეც იყოს. და მათ არაფერი აგიხსნიათ. და ეს ნიშნავს სპეციალურ პროცედურას. ამიტომ სიბნელეში წავედი. საწყალი თხები... კარგი, არაუშავს, გავარკვევთ და დამნაშავეებს დავსჯით. ეს მათთვის იქნებანიგელა სატივას სანთლების ინსტრუქციები,
მეცამეტე ხელფასი მყარ ვალუტაში... გაზარდა. მაგიდაზე რვეული დავდე, გარეკანზე დანტე ალიგიერის პროფილით და გარკვეული დრო გავატარე ფურცელზე კალმით კონცენტრირებულად და მაშინვე მივხვდი, რომ შიგნით დანტეს იგივე პროფილებს ხატავდა, მხოლოდ პატარებს. რატომღაც, ეს ადამიანები ფიქრობენ, რომ მეოცე საუკუნის განმავლობაში, ნიგელა სატივას სანთლების ინსტრუქციები არ შეისწავლეს მათი მუშაობის მეთოდები. რვეულის დადება. ჩემსკენ წამოვიდა, თითქოს მთელი ჩემი ემოციური ჭრილობის მოშუშებას აპირებდა თავისი დაგვიანებული ჩახუტებით, მაგრამ შემდეგ მის მაგიდაზე დადებულ ტელეფონმა დარეკა. შმიგამ აგინა და ტელეფონი აიღო. რამდენიმე წამი მოუსმინა, შემდეგ კი სახე პირქუში და ყურადღებიანი გახდა. Დიახ სერ, . თქვა და გათიშა. ზემოდან შემომხედა და დამნაშავედ ასწია ხელები. ხედავ რა ხდება.
სურვილი. შემდეგ წადი,. თქვა ჩაპაევმა და ექსტაზის სასტუმროს უკნიდან წამოდგა. შტაბის ვაგონიდან რომ დავტოვეთ, მატარებლის უკანა მხარეს წავედით. რაც ხდებოდა სულ უფრო უცნაურად მეჩვენებოდა. რამდენიმე ვაგონი, რომელიც ჩვენ გავიარეთ, ბნელი იყო და თითქოს იყო. ცარიელი. სინათლე არსად იყო; კარების მიღმა ერთი ხმაც არ ისმოდა. ძლივს დავიჯერე, რომ კაკლის პანელების მიღმა, რომლის გაპრიალებულ ზედაპირზეც ჩაპაევის სიგარის შუქი ირეკლავდა. წითელ ჯარისკაცს სძინავს, მაგრამ მე ვცდილობდი ამაზე არ მეფიქრა.
2003 წლისთვის იაპონელი სპეციალისტები. შესაძლებელი გახდა რამდენიმე მიკროზონდის კომპლექტის შემუშავება, რომელიც უშუალოდ აკავშირებდა ტვინს და შესაძლებელს ხდიდა, გარკვეულწილად, ობიექტივებულიყო ადამიანის აღქმის სურათი. იაპონურმა აღჭურვილობამ ვერ დაადგინა, რას გრძნობდა და ფიქრობდა დაკვირვებული ადამიანი. მაგრამ ამან შესაძლებელი გახადა იმის ფერადი (თუმცა ბუნდოვანი) გამოსახულების მიღება ვაიპ ჰიდრა.და არა მარტო რეალურად, არამედ ძილის სწრაფ ფაზაშიც. ეს შესაძლებელი გახდა იმის გამო, რომ სიგნალი აღებული იყო არა ოპტიკური ნერვიდან, არამედ იმ ზონებიდან. ტვინი, რომელიც პასუხისმგებელია უშუალო წარმომადგენლობაზე. აღჭურვილობა დაუყოვნებლივ შეიძინა პოტაშინსკის გუნდმა. ტვინში ჩადგმული ზონდების ნაკრებიდან სიგნალი შეიძლება გადაიცეს უსადენოდ. კავშირები, რომლებიც ბაბლონავტს საშუალებას აძლევდა ეცხოვრა ნორმალურად, ექსპერიმენტში მონაწილეობით არანაირად არ იყო შეზღუდული. საჭირო იყო მხოლოდ სიგნალის მიმღები სადმე ახლოს ყოფილიყო. რომელიც შემდეგ რეალურ დროში გადასცემდა ინფორმაციას კომპიუტერს. მოკლედ, პოტაშინსკის ექსპერიმენტების სქემა ასე გამოიყურებოდა: ჯერ ბაბლონავტ-ექსპერიმენტატორის ტვინში ჩაუნერგეს საკონტროლო ელექტროდების ნაკრები (მოხალისეები, როგორც ყოველთვის, ამ როლისთვის FSB-ის ახალგაზრდა ოფიცრებიდან შეირჩნენ).
მკვდარი წერტილიდან. მისმინე, ძმაო, - თქვა მან, - ეს რა ბუნებაა? Რაზე ლაპარაკობ? - იკითხა ისა. ისე, მანქანაში თქვი, რომ ნამსხვრევ-ფრაგმენტულ კორპუსს ისეთივე ბუნება აქვს, როგორც ცისარტყელას. და როგორი ბუნებაა ეს? ჯობია არ გკითხო ამის შესახებ. ძმაო, - წარბები შეჭმუხნა ისა. რატომ. თქვენ ჯერ არ ხართ მზად ამისთვის. როგორ არ არის მზად. და ამფეტამინი და მარიხუანა ერთდროულად. მზად რომ ვიყო, არ ვიკითხავდი. ასე რომ თქვენ შეგიძლიათ უპასუხოთ. ან.
მალე. იკითხა. ჰაშიში ახლა ვლადივოსტოკში იყიდე-მეთქი, აი... ვიღაც ჭირვეულია. შეყვარებული შეიძლება განაწყენდეს, რომ მას არ უშვებენ ქსელის დერეფანზე შორს. მაგრამ პორფირი ასეთი არ არის. პირველი, რაც გავაკეთე, იყო მის სათვალეებთან დაკავშირება. კარგი, თქვა მან. რა ბაქანი... ამასობაში სათვალის სურათს ვდებ პანელზე. მისი მორფირება ჭერის კამერის ხედით. იფაკმა აამაღლა რაიმე მორფები ძალაუფლების დაძაბვის გარეშე. ეს იყო ამაზრზენი. ახლა მარამ თავის ოგმენტ სათვალეში დამინახა აიფაკის ადგილას და თან დაკვირვებაც შეძლო.
განვითარებული შიფრი. ხანდახან აღნიშნავდა, რომ ისევ ტანჯავდა განმეორებადი სიზმრებით 1-ლი სქემის მიხედვით. ან სქემის 2-ის მიხედვით. და უცებ, ღია ტექსტში, როგორც გაქცევის ტირილი: ოცნებობდა. მოწევა მთელი საათის განმავლობაში,ჩემს მიერ მოკლული ბავშვობაში... ხმა ეკრანს მიღმა. ის გაჩუმდა. რატომ აკეთებს ის ამას? - ჰკითხა სემმა. ”მე დავიძინე,” უპასუხა ნატაშამ. სემმა ნაზად მოხვია მუცლის წვერიანი წვერი და დივანს მიეყრდნო. ნატაშამ ჩუმად გადაყლაპა. სემმა იატაკზე დადებული საქმე მისკენ მიიწია, გახსნა და პატარა შუშის ყუთი ამოიღო. ქილა, წითლად შეაფურთხა მასში, ხრახნიანი და უკან გადააგდო - მთელი ამ ოპერაციამ მას მთელი საათის განმავლობაში მიქსების მოწევა დასჭირდა. - იცი, ნატაშა, - თქვა მან.
ამის შემდეგ მან ჰაშიშის წმინდანიჰეი, თათარსკი. Პასუხის გარეშე. თათარსკიმ კიდევ ერთი წუთი დაელოდა და მიხვდა, რომ მარტო დარჩა. მარტო თავისი გონებით მზადაა ველურობისთვის. სასწრაფოდ მჭირდებოდა რაღაცით დაკავება. დაურეკე, ჩაიჩურჩულა მან. - Ვის. გირეევი. მან იცის რა უნდა გააკეთოს. Დიდი ხანის განმვლობაში. ტელეფონს არავინ პასუხობდა. ბოლოს მეთხუთმეტე თუ მეოცე რგოლზე გირეევმა პირქუშად უპასუხა: გამარჯობა. ანდრიუშა.
არა, თქვა მან. ჩაკეტილ ოთახში ზის კაცი, რომელმაც ჩინური არ იცის. ფანჯრიდან აძლევენ მას შენიშვნებს კითხვებით ჩინურ ენაზე. მისთვის ეს მხოლოდ ქაღალდის ნაჭრებია, რომლებზედაც დახატულია ჩიყვი, რომლის მნიშვნელობაც მას არ ესმის. მაგრამ მისი ოთახი სავსეა სხვადასხვა წიგნებით. წესები, რომლებიც დეტალურად აღწერს, თუ როგორ და რა თანმიმდევრობით უნდა ვუპასუხოთ მხოლოდ კვნესით. და ის, ამ წესების მიხედვით მოქმედებს, სხვა ფანჯარაში პასუხებს ჩინურად იძლევა. ისინი სრულ ნდობას უქმნიან ყველას გარეთ მდგომს, რომ მან ჩინური იცის. თუმცა თვითონაც საერთოდ არ ესმის, რას ეკითხებიან. მიმართეთ hydra onion ბრაუზერს რა მნიშვნელობა აქვს მის პასუხებს. Გააცნო. ჰოდა, გავაცანი. სურა იგივე ჩინური ოთახია, მხოლოდ ავტომატიზირებული. საცნობარო წიგნების მქონე პირის ნაცვლად, არის სკანერი, რომელიც კითხულობს იეროგლიფებს. მითითებებისა და წესების უზარმაზარი მონაცემთა ბაზა, რომელიც საშუალებას გაძლევთ აირჩიოთ იეროგლიფები პასუხისთვის.
ბედის ირონიით, სწორედ ამან მომიტანა სიცხადე. ყოველ შემთხვევაში პრაქტიკული თვალსაზრისით. მივხვდი, რა პრობლემა მქონდა. ეს არ არის მხოლოდ რთული, ის გაუგებარია. მასთან დაკავშირებული კითხვების სწორად ჩამოყალიბებაც კი რთული იყო. ერთადერთი ნუგეში ჩანდა, როგორ მოვძებნოთ Hydra საიტი ტორუს ენაზე, სიტუაცია ისეთივე მოლიპულ იყო. ადამიანის ცნობიერებით. მე ვერ გავუმკლავდი ამას. და მე გადავწყვიტე, რომ საუკეთესო გამოსავალი სიტუაციიდან დაბრუნება იქნებოდა. ჩვეულებისამებრ, ეგზისტენციალური სავარჯიშოების დატოვება ან მათი დავიწყება.
მალე გზა მდიდარ სოფელში მიდიოდა, ახლად შეღებილი თეთრი ეკლესიით. სევდიანი, ცალფეხა ჯარისკაცი გაცვეთილ ნაცრისფერ ფორმაში იჯდა ეკლესიის გალავანთან. თქვენ არ იცით სად არის ოპტინა პუსტინი. ჰკითხა თ.-მ ცხენიდან მისკენ მოხრილი. ეს არის ის, რაზეც ბიჭები საუბრობენ. ჰკითხა ჯარისკაცმა. რომელიც ახლახან შეიქმნა როგორც დაწესებულება. გადავწყვიტე, რომ სამხედრო მოსამსახურე ჭკუაზე იყო. როგორ შეიქმნა ეს ადგილი ახლახან. რაც ნიშნავს, ყოველ შემთხვევაში, ყველაფერი სწორია, შენი პატივიო, თქვა ჯარისკაცმა და ჰიდრა რულეტკახელი, შენ მაინც შორს იქნები. აქ მხოლოდ ორი გზაა და ორივე ერთი მიმართულებით მიდის. გაიარეთ პირველი მარშრუტი, ან მეორე. თუ გსურთ უფრო მოკლე მარშრუტი, მაშინ ტყის გავლით. იქ არის ჩანგალი, ასე რომ თქვენ შეგიძლიათ ორივე მხარეს აიღოთ.
და სხვა გრიმასები, რომლებზეც მგონი ბევრი გსმენიათ... ლენას არ ესმოდა, როგორი მამა-დედა სულელი იყო თვრამეტი (ახალგაზრდა კაცმა ეს სიტყვები სწრაფად და ჩუმად ამოიოხრა), მაგრამ მაშინვე დაავიწყდა - მან. უცებ მოინდომა ოცი ათასი ევროს ღირებულების ღვინის დალევა, რომ პირი აუწყლიანდა. დარბაზში მშვიდი კვნესა გავიდა, რაც ადასტურებდა, რომ შეკრებილებს მხოლოდ გრიმასების შესახებ არ გაუგიათ. და ჩვენ მოვახერხეთ მათ შესახებ არსებული ყველა ინფორმაციის დეტალურად შესწავლა. ”ამ ბოლო დროს, დასავლურმა სადაზვერვო სააგენტოებმა დაიწყეს ნამდვილი ნადირობა ჩვენს მდიდარ იდიოტებზე”, - განაგრძო ახალგაზრდამ. - დიდი სკანდალების შესახებ, რა თქმა უნდა, გსმენიათ მისამართი hydra onion tk okey საიტი hydra in torusდაპატიმრებები: ჯერ კურშეველი, შემდეგ ფიჯი, შემდეგ ჰერმესის ბუტიკი და ახლა სენტ მორიცი, მალდივები და ანტარქტიდა. კამპანია საგულდაგულოდ არის დაგეგმილი და აქვს ორი ძირითადი მიზანი - პირველი, დისკრედიტაცია. რუსული ცივილიზაცია - თავის რესურსებზე კონტროლის დამყარება მისი ძირითადი აქტივების მფლობელებზე კომპრომატების შეგროვებით. ჩვენი ელიტა გახდა სამიზნე და სივრცე-დროის ამჟამინდელი წერტილის ობიექტური რეალობა ასეთია. ჩვენ მასთან ერთად გავხდით სამიზნეები. წარბშეკრული გაჩუმდა, თითქოს მსმენელებს სიტუაციის სიმძიმის გააზრების შესაძლებლობას აძლევდა. მერე სახეზე სევდიანი ღიმილი დაუბრუნდა და განაგრძო: სიტუაცია უნდა შევინარჩუნოთ.
მან გაიცინა. ყოველ შემთხვევაში თქვენ არ გჭირდებათ საკუთარი ხალხის წინაშე განაწყენებული უდანაშაულობის პრეტენზია. Რის შესახებ. როცა მას პროვოცირება მოვახდინე. როცა შიშველი გადმოხტა ჰიდრა ხახვის შესასვლელიდა მის წინ ძაღლის სტილში დადგა. თქვენ ამას პროვოკაციაად თვლით. Რა თქმა უნდა. მაინტერესებს, რატომ შეაქციე მას ზურგი? მხრები ავიჩეჩე. საიმედოობისთვის. რა არის ამაში განსაკუთრებით სანდო? კუდი უფრო ახლოს არის მიზანთან, - ვთქვი მე, არც ისე თავდაჯერებულად. კარგად. და თქვენ უნდა გადახედოთ თქვენს მხარზე.
მესამე მონტალ ვანილის ექსტაზიშემდეგნაირად: მის აღმატებულებას ო.კონსტანტინე პეტროვიჩ პობედონოსცევს, თანამდებობის პირს. მე გადავცემ თქვენს აღმატებულებას ძველი ეგვიპტური წარწერის თარგმანს. მედალიონში ნაპოვნი ოქროს ფურცელი მონტალ ვანილის ექსტაზიმამა ვარსონოფი ნეტრებკოს ცხედარი, როგორც გრაფი თ-ის საქმის გამოძიების ნაწილი. ეგვიპტის მუზეუმის სპეციალისტების აზრით, იეროგლიფების მონახაზი საშუალებას გვაძლევს დავათარიღოთ ტექსტი მე-18 დინასტიის ეპოქით ან ოდნავ მოგვიანებით. წარწერა წერია: ჰერმაფროდიტის საიდუმლო სახელი კატის თავით, რომელიც მასზე ძალაუფლებას ანიჭებს, არის არსი. ANGC. თუ შეგიძლიათ ამ სახელით ჰერმაფროდიტის კონტროლი. ჯარიმა. მთარგმნელები, რომ ANGC ასევე შეიძლება ითარგმნოს როგორც ტრადიციული BHGV (ან სხვაგვარად, იეროგლიფური რეგისტრების გამოყენებისას კორესპონდენციის ცხრილების არჩევის მიხედვით). თუმცა, თავად მედალიონი არ შეიძლება გადაეცეს თქვენს აღმატებულებას თქვენი მოთხოვნის მიუხედავად.
ნავიგაციის პოსტი
